ENG-780 - Tldraw race condition (#369)

* WIP upload to test

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* .

* Working

* Update apps/roam/src/components/canvas/Tldraw.tsx

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: mdroidian

apps/roam/src/components/canvas/Tldraw.tsx

@@ -41,6 +41,7 @@ import {
   defaultEditorAssetUrls,
   usePreloadAssets,
   StateNode,
+  DefaultSpinner,
 } from "tldraw";
 import "tldraw/tldraw.css";
 import tldrawStyles from "./tldrawStyles";
@@ -86,6 +87,7 @@ import sendErrorEmail from "~/utils/sendErrorEmail";
 import { TLDRAW_DATA_ATTRIBUTE } from "./tldrawStyles";
 import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
+import { isPluginTimerReady, waitForPluginTimer } from "~/utils/pluginTimer";
 
 declare global {
   interface Window {
@@ -123,6 +125,38 @@ const TldrawCanvas = ({ title }: { title: string }) => {
   const [maximized, setMaximized] = useState(false);
   const [isConvertToDialogOpen, setConvertToDialogOpen] = useState(false);
 
+  // Workaround to avoid a race condition when loading a canvas page directly
+  // Start false to avoid noisy warnings on first render if timer isn't initialized yet
+  const [isPluginReady, setIsPluginReady] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    if (!isPluginReady) {
+      // If already ready, flip immediately
+      if (isPluginTimerReady()) {
+        setIsPluginReady(true);
+        return;
+      }
+
+      // Otherwise, wait up to the timeout and proceed either way
+      void (async () => {
+        const ready = await waitForPluginTimer();
+        if (cancelled) return;
+
+        if (!ready) {
+          console.warn("Plugin timer timeout — proceeding with canvas mount anyway.");
+          // Optional: dispatchToastEvent({ id: 'tldraw-plugin-timer-timeout', title: 'Timed out waiting for plugin init', severity: 'warning' })
+        }
+
+        setIsPluginReady(true);
+      })();
+    }
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isPluginReady]);
   const allRelations = useMemo(() => {
     const relations = getDiscourseRelations();
     discourseContext.relations = relations.reduce(
@@ -520,7 +554,7 @@ const TldrawCanvas = ({ title }: { title: string }) => {
             </button>
           </div>
         </div>
-      ) : !store || !assetLoading.done || !extensionAPI ? (
+      ) : !store || !assetLoading.done || !extensionAPI || !isPluginReady ? (
         <div className="flex h-full items-center justify-center">
           <div className="text-center">
             <h2 className="mb-2 text-2xl font-semibold">
@@ -529,9 +563,11 @@ const TldrawCanvas = ({ title }: { title: string }) => {
                 : "Loading Canvas"}
             </h2>
             <p className="mb-4 text-gray-600">
-              {error || assetLoading.error
-                ? "There was a problem loading the Tldraw canvas. Please try again later."
-                : ""}
+              {error || assetLoading.error ? (
+                "There was a problem loading the Tldraw canvas. Please try again later."
+              ) : (
+                <DefaultSpinner />
+              )}
             </p>
           </div>
         </div>

apps/roam/src/index.ts

@@ -28,6 +28,7 @@ import {
   removeDiscourseFloatingMenu,
 } from "./components/DiscourseFloatingMenu";
 import { createOrUpdateDiscourseEmbedding } from "./utils/syncDgNodesToSupabase";
+import { initPluginTimer } from "./utils/pluginTimer";
 
 const initPostHog = () => {
   posthog.init("phc_SNMmBqwNfcEpNduQ41dBUjtGNEUEKAy6jTn63Fzsrax", {
@@ -92,6 +93,8 @@ export default runExtension(async (onloadArgs) => {
     });
   }
 
+  initPluginTimer();
+
   await initializeDiscourseNodes();
   refreshConfigTree();
 

apps/roam/src/utils/pluginTimer.ts

@@ -0,0 +1,78 @@
+/**
+ * Global timer utility for the Discourse Graph plugin
+ * Tracks when 3 seconds have passed since plugin initialization
+ * This helps prevent race conditions when rendering tldraw components
+ */
+
+let pluginStartTime: number | null = null;
+let isTimerReady = false;
+
+/**
+ * Initialize the plugin timer
+ * Should be called when the plugin first loads
+ */
+export const initPluginTimer = (): void => {
+  pluginStartTime = Date.now();
+
+  // Set a timeout to mark the timer as ready after 3 seconds
+  setTimeout(() => {
+    isTimerReady = true;
+  }, 3000);
+};
+
+/**
+ * Check if the plugin timer is ready (3 seconds have passed)
+ * @returns true if 3 seconds have passed since plugin initialization
+ */
+export const isPluginTimerReady = (): boolean => {
+  if (pluginStartTime === null) {
+    console.warn("Plugin timer not initialized");
+    return false;
+  }
+
+  return isTimerReady;
+};
+
+/**
+ * Get the elapsed time since plugin initialization
+ * @returns elapsed time in milliseconds, or 0 if not initialized
+ */
+export const getPluginElapsedTime = (): number => {
+  if (pluginStartTime === null) {
+    return 0;
+  }
+  const time = Date.now() - pluginStartTime;
+  return time;
+};
+
+/**
+ * Wait for the plugin timer to be ready
+ * @param timeoutMs maximum time to wait (default: 5000ms)
+ * @returns Promise that resolves when timer is ready or timeout is reached
+ */
+export const waitForPluginTimer = (
+  timeoutMs: number = 5000,
+): Promise<boolean> => {
+  return new Promise((resolve) => {
+    if (isPluginTimerReady()) {
+      resolve(true);
+      return;
+    }
+
+    const startTime = Date.now();
+    const checkInterval = setInterval(() => {
+      if (isPluginTimerReady()) {
+        clearInterval(checkInterval);
+        resolve(true);
+        return;
+      }
+
+      const elapsed = Date.now() - startTime;
+      if (elapsed >= timeoutMs) {
+        clearInterval(checkInterval);
+        resolve(false);
+        return;
+      }
+    }, 100);
+  });
+};