Mark app ready after initial render (#77)

shayancoin · web-flow · commit b1e52d62a2b5 · 2025-10-16T13:25:01.000-07:00
diff --git a/frontend/src/app/components/app-ready.tsx b/frontend/src/app/components/app-ready.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function AppReadyEffect() {
+  useEffect(() => {
+    const appElement = document.getElementById('app')
+    if (!appElement) {
+      return
+    }
+
+    let frame1: number | null = null
+    let frame2: number | null = null
+
+    const markReady = () => {
+      appElement.setAttribute('data-ready', 'true')
+    }
+
+    frame1 = requestAnimationFrame(() => {
+      frame2 = requestAnimationFrame(markReady)
+    })
+
+    return () => {
+      if (frame1 !== null) {
+        cancelAnimationFrame(frame1)
+      }
+      if (frame2 !== null) {
+        cancelAnimationFrame(frame2)
+      }
+    }
+  }, [])
+
+  return null
+}
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
 import { Providers } from './providers'
+import { AppReadyEffect } from './components/app-ready'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -22,7 +23,10 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <Providers>
-          {children}
+          <div id="app" data-ready="false">
+            <AppReadyEffect />
+            {children}
+          </div>
         </Providers>
       </body>
     </html>
