v2.461 - Fix Glitch 2

Author: imjustinliao

frontend/src/components/app/AppShell.tsx

@@ -1,6 +1,9 @@
 "use client"
 
 import { lazy, Suspense, useCallback, useEffect, useRef, useState } from "react"
+
+/** Delay before showing unauthenticated overlay/redirect so auth persistence can restore (avoids sidebar flash). */
+const AUTH_SETTLE_MS = 220
 import { usePathname } from "next/navigation"
 import { Sidebar } from "@/components/app/Sidebar"
 import { ErrorBoundary } from "@/components/app/ErrorBoundary"
@@ -34,11 +37,29 @@ function readCachedOnboardingSnapshot(): { required: boolean; memory: Record<str
 function AuthGate({ children }: { children: React.ReactNode }) {
   const COLORS = useThemeColors()
   const { user, loading } = useAuth()
+  const [showUnauthOverlay, setShowUnauthOverlay] = useState(false)
+  const settleTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   useEffect(() => {
-    if (!loading && !user) {
+    if (loading || user) {
+      if (settleTimerRef.current) {
+        clearTimeout(settleTimerRef.current)
+        settleTimerRef.current = null
+      }
+      setShowUnauthOverlay(false)
+      return
+    }
+    settleTimerRef.current = setTimeout(() => {
+      settleTimerRef.current = null
+      setShowUnauthOverlay(true)
       try { sessionStorage.setItem("fp-auth-redirect", window.location.pathname) } catch {}
       window.location.href = "/"
+    }, AUTH_SETTLE_MS)
+    return () => {
+      if (settleTimerRef.current) {
+        clearTimeout(settleTimerRef.current)
+        settleTimerRef.current = null
+      }
     }
   }, [loading, user])
 
@@ -67,13 +88,13 @@ function AuthGate({ children }: { children: React.ReactNode }) {
     </div>
   )
 
-  // Always render the shell (sidebar, main, topbar, input) so it stays in the DOM and cached —
-  // no unmount on auth loading, so no black flash or sidebar disappearing when switching pages.
-  // Only overlay the redirect message when we're sure the user is not authenticated.
+  // Always render the shell (sidebar, main, topbar, input) so it stays visible and cached.
+  // Only show redirect overlay after auth has "settled" as unauthenticated (short delay
+  // so Firebase persistence can restore the session and we don't flash-hide the sidebar).
   return (
     <>
       {children}
-      {!loading && !user ? renderGateStatus("Redirecting to sign-in...") : null}
+      {showUnauthOverlay ? renderGateStatus("Redirecting to sign-in...") : null}
     </>
   )
 }