fix incorrect font rendered on late load (#1555)

src/components/App.tsx

@@ -114,7 +114,6 @@ import {
   ENV,
 } from "../constants";
 import {
-  FONT_LOAD_THRESHOLD,
   INITAL_SCENE_UPDATE_TIMEOUT,
   TAP_TWICE_TIMEOUT,
 } from "../time_constants";
@@ -303,6 +302,15 @@ class App extends React.Component<any, AppState> {
     event.preventDefault();
   };
 
+  private onFontLoaded = () => {
+    globalSceneState.getElementsIncludingDeleted().forEach((element) => {
+      if (isTextElement(element)) {
+        invalidateShapeForElement(element);
+      }
+    });
+    this.onSceneUpdated();
+  };
+
   private initializeScene = async () => {
     const searchParams = new URLSearchParams(window.location.search);
     const id = searchParams.get("id");
@@ -327,23 +335,6 @@ class App extends React.Component<any, AppState> {
       }
     }
 
-    // rerender text elements on font load to fix #637
-    try {
-      await Promise.race([
-        document.fonts?.ready?.then(() => {
-          globalSceneState.getElementsIncludingDeleted().forEach((element) => {
-            if (isTextElement(element)) {
-              invalidateShapeForElement(element);
-            }
-          });
-        }),
-        // if fonts don't load in 1s for whatever reason, don't block the UI
-        new Promise((resolve) => setTimeout(resolve, FONT_LOAD_THRESHOLD)),
-      ]);
-    } catch (error) {
-      console.error(error);
-    }
-
     if (this.state.isLoading) {
       this.setState({ isLoading: false });
     }
@@ -402,6 +393,9 @@ class App extends React.Component<any, AppState> {
     window.addEventListener(EVENT.DRAG_OVER, this.disableEvent, false);
     window.addEventListener(EVENT.DROP, this.disableEvent, false);
 
+    // rerender text elements on font load to fix #637 && #1553
+    document.fonts?.addEventListener?.("loadingdone", this.onFontLoaded);
+
     // Safari-only desktop pinch zoom
     document.addEventListener(
       EVENT.GESTURE_START,

src/global.d.ts

@@ -1,6 +1,10 @@
 interface Document {
   fonts?: {
     ready?: Promise<void>;
+    addEventListener?(
+      type: "loading" | "loadingdone" | "loadingerror",
+      listener: (this: Document, ev: Event) => any,
+    ): void;
   };
 }
 

src/time_constants.ts

@@ -1,4 +1,3 @@
 // time in milliseconds
-export const FONT_LOAD_THRESHOLD = 1000;
 export const TAP_TWICE_TIMEOUT = 300;
 export const INITAL_SCENE_UPDATE_TIMEOUT = 5000;