cleanup

src/appState.ts

@@ -74,7 +74,7 @@ export const getDefaultAppState = (): Omit<
     zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
     viewModeEnabled: false,
     networkSpeed: 0,
-    ping: "…",
+    networkPing: 0,
   };
 };
 
@@ -156,7 +156,7 @@ const APP_STATE_STORAGE_CONF = (<
   zoom: { browser: true, export: false },
   viewModeEnabled: { browser: false, export: false },
   networkSpeed: { browser: false, export: false },
-  ping: { browser: false, export: false },
+  networkPing: { browser: false, export: false },
 });
 
 const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

src/components/App.tsx

@@ -292,7 +292,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   };
   private scene: Scene;
   private networkSpeedIntervalId?: any;
-  private pingIntervalId?: any;
+  private networkPingIntervalId?: any;
   constructor(props: ExcalidrawProps) {
     super(props);
     const defaultAppState = getDefaultAppState();
@@ -1028,21 +1028,24 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   private calculateNetStats = () => {
-    this.checkPing();
+    this.checkNetworkPing();
     this.checkNetworkSpeed();
   };
 
-  private checkPing = async () => {
+  private checkNetworkPing = async () => {
     if (!this.state.showStats || !this.props.isCollaborating) {
-      clearTimeout(this.pingIntervalId);
+      clearTimeout(this.networkPingIntervalId);
       return;
     }
-    const ping = await simulatePing();
-    this.setState({ ping });
-    if (this.pingIntervalId) {
-      clearTimeout(this.pingIntervalId);
+    const networkPing = await simulatePing();
+    this.setState({ networkPing });
+    if (this.networkPingIntervalId) {
+      clearTimeout(this.networkPingIntervalId);
     }
-    this.pingIntervalId = setTimeout(this.checkPing, NETWORK_SPEED_TIMEOUT_MS);
+    this.networkPingIntervalId = setTimeout(
+      this.checkNetworkPing,
+      NETWORK_SPEED_TIMEOUT_MS,
+    );
   };
 
   private checkNetworkSpeed = async () => {

src/components/Stats.tsx

@@ -11,7 +11,13 @@ import { t } from "../i18n";
 import useIsMobile from "../is-mobile";
 import { getTargetElements } from "../scene";
 import { AppState } from "../types";
-import { debounce, formatSpeedBits, getVersion, nFormatter } from "../utils";
+import {
+  debounce,
+  formatSpeedBits,
+  formatTime,
+  getVersion,
+  nFormatter,
+} from "../utils";
 import { close } from "./icons";
 import { Island } from "./Island";
 import "./Stats.scss";
@@ -182,7 +188,13 @@ export const Stats = (props: {
                 </tr>
                 <tr>
                   <td>{t("stats.ping")}</td>
-                  <td>{props.appState.ping}</td>
+                  <td>
+                    {props.appState.networkPing === 0
+                      ? "…"
+                      : props.appState.networkPing > 0
+                      ? formatTime(props.appState.networkPing)
+                      : t("stats.error")}
+                  </td>
                 </tr>
                 <tr>
                   <td>{t("stats.speed")}</td>

src/networkStats.ts

@@ -59,9 +59,8 @@ export const simulatePing = async () => {
       method: "HEAD",
     });
     const endTime = new Date().getTime();
-    const delay = endTime - startTime;
-    return delay < 1000 ? `${delay} ms` : `${(delay / 1000).toFixed(1)} s`;
+    return endTime - startTime;
   } catch (e) {
-    return "Error!";
+    return -1;
   }
 };

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -40,6 +40,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -501,6 +502,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -968,6 +970,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -1744,6 +1747,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -1948,6 +1952,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -2406,6 +2411,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -2659,6 +2665,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -2823,6 +2830,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -3300,6 +3308,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -3608,6 +3617,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -3812,6 +3822,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -4056,6 +4067,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -4308,6 +4320,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -4691,6 +4704,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -4986,6 +5000,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -5293,6 +5308,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -5501,6 +5517,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -5665,6 +5682,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -6118,6 +6136,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -6436,6 +6455,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -8470,6 +8490,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -8832,6 +8853,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -9087,6 +9109,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -9340,6 +9363,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -9655,6 +9679,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -9819,6 +9844,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -9983,6 +10009,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -10147,6 +10174,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -10341,6 +10369,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -10535,6 +10564,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -10729,6 +10759,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -10923,6 +10954,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -11087,6 +11119,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -11251,6 +11284,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -11445,6 +11479,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -11609,6 +11644,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -11803,6 +11839,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -12519,6 +12556,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -12772,6 +12810,7 @@ Object {
   "lastPointerDownWith": "touch",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -12874,6 +12913,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -12974,6 +13014,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -13138,6 +13179,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -13446,6 +13488,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -13754,6 +13797,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -13918,6 +13962,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -14114,6 +14159,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -14363,6 +14409,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -14687,6 +14734,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -15526,6 +15574,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -15834,6 +15883,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -16142,6 +16192,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -16521,6 +16572,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -16688,6 +16740,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -17009,6 +17062,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -17248,6 +17302,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -17503,6 +17558,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -17830,6 +17886,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -17930,6 +17987,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -18094,6 +18152,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -18915,6 +18974,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -19015,6 +19075,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -19769,6 +19830,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -20174,6 +20236,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -20447,6 +20510,7 @@ Object {
   "lastPointerDownWith": "touch",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -20549,6 +20613,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -21047,6 +21112,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,
@@ -21147,6 +21213,7 @@ Object {
   "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
+  "networkPing": 0,
   "networkSpeed": 0,
   "offsetLeft": 0,
   "offsetTop": 0,

src/types.ts

@@ -89,7 +89,7 @@ export type AppState = {
   gridSize: number | null;
   viewModeEnabled: boolean;
   networkSpeed: number;
-  ping: string;
+  networkPing: number;
 
   /** top-most selected groups (i.e. does not include nested groups) */
   selectedGroupIds: { [groupId: string]: boolean };

src/utils.ts

@@ -381,6 +381,9 @@ export const getVersion = () => {
   );
 };
 
+export const formatTime = (time: number): string => {
+  return time < 1000 ? `${time} ms` : `${(time / 1000).toFixed(1)} s`;
+};
 // Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js
 export const supportsEmoji = () => {
   const canvas = document.createElement("canvas");