Use AbortController and get rid of double-RAF

Author: ptodev

internal/web/ui/src/features/component/AsyncStringifiedValue.tsx

@@ -92,27 +92,26 @@ const AsyncLargeValue = ({ value }: { value: Value }) => {
   useEffect(() => {
     let cancelled = false;
 
-    // Use double-RAF to ensure the loading state is painted before blocking work starts
-    requestAnimationFrame(() => {
+    // Use setTimeout to defer blocking work to a macrotask, allowing React to
+    // commit and paint the loading state first
+    const timeoutId = setTimeout(() => {
       if (cancelled) return;
-      requestAnimationFrame(() => {
-        if (cancelled) return;
-
-        try {
-          const result = alloyStringify(value);
-          if (!cancelled) {
-            setState({ status: 'ready', result });
-          }
-        } catch {
-          if (!cancelled) {
-            setState({ status: 'ready', result: '[Error stringifying value]' });
-          }
+
+      try {
+        const result = alloyStringify(value);
+        if (!cancelled) {
+          setState({ status: 'ready', result });
+        }
+      } catch {
+        if (!cancelled) {
+          setState({ status: 'ready', result: '[Error stringifying value]' });
         }
-      });
-    });
+      }
+    }, 0);
 
     return () => {
       cancelled = true;
+      clearTimeout(timeoutId);
     };
   }, [value]);
 

internal/web/ui/src/pages/ComponentDetailPage.tsx

@@ -41,6 +41,7 @@ const ComponentDetailPage: FC = () => {
         return;
       }
 
+      const abortController = new AbortController();
       const fetchURL = `./api/v0/web/components/${id}`;
       setLoadingEndpoint(fetchURL);
 
@@ -49,6 +50,7 @@ const ComponentDetailPage: FC = () => {
         const resp = await fetch(fetchURL, {
           cache: 'no-cache',
           credentials: 'same-origin',
+          signal: abortController.signal,
         });
         const data: ComponentDetail = await resp.json();
 
@@ -58,6 +60,7 @@ const ComponentDetailPage: FC = () => {
           const moduleComponentsResp = await fetch(modulesURL, {
             cache: 'no-cache',
             credentials: 'same-origin',
+            signal: abortController.signal,
           });
           const moduleComponents = (await moduleComponentsResp.json()) as ComponentInfo[];
 
@@ -68,7 +71,17 @@ const ComponentDetailPage: FC = () => {
         setLoadingEndpoint(null);
       };
 
-      worker().catch(console.error);
+      worker().catch((err) => {
+        // Ignore abort errors - these are expected when the effect cleans up
+        if (err instanceof Error && err.name === 'AbortError') {
+          return;
+        }
+        console.error(err);
+      });
+
+      return () => {
+        abortController.abort();
+      };
     },
     [id]
   );