diff --git a/src/components/App.tsx b/src/components/App.tsx index 13bd6e8b..584e5c1e 100644 --- a/src/components/App.tsx +++ b/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 { 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 { } } - // 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 { 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, diff --git a/src/global.d.ts b/src/global.d.ts index 9c54b70b..59672b74 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,6 +1,10 @@ interface Document { fonts?: { ready?: Promise; + addEventListener?( + type: "loading" | "loadingdone" | "loadingerror", + listener: (this: Document, ev: Event) => any, + ): void; }; } diff --git a/src/time_constants.ts b/src/time_constants.ts index 786f03ba..c673274d 100644 --- a/src/time_constants.ts +++ b/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;