fix(loading): update LoadingOverlay component to support portal prop and adjust loading states in HomePage and AuthCallback

app/auth/callback/page.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from 'next/navigation'
 import { useAuth } from '@/lib/auth/context'
 import { AUTH_URL } from '@/lib/api/client'
 import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
+import LoadingOverlay from '@/components/LoadingOverlay'
 
 function AuthCallbackContent() {
   const router = useRouter()
@@ -108,26 +109,12 @@ function AuthCallbackContent() {
     )
   }
 
-  return (
+  return <LoadingOverlay title="Completing sign in..." portal={false} />
-    <div className="flex min-h-screen items-center justify-center p-4">
-      <div className="text-center">
-        <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
-        <p className="text-neutral-600 dark:text-neutral-400">Completing sign in...</p>
-      </div>
-    </div>
-  )
 }
 
 export default function AuthCallback() {
   return (
-    <Suspense fallback={
+    <Suspense fallback={<LoadingOverlay title="Loading..." portal={false} />}>
-      <div className="flex min-h-screen items-center justify-center p-4">
-        <div className="text-center">
-          <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-neutral-800 mx-auto mb-4"></div>
-          <p className="text-neutral-600 dark:text-neutral-400">Loading...</p>
-        </div>
-      </div>
-    }>
       <AuthCallbackContent />
     </Suspense>
   )

app/page.tsx

@@ -12,7 +12,7 @@ export default function HomePage() {
   const { user, loading } = useAuth()
 
   if (loading) {
-    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Pulse" />
+    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
   if (!user) {
@@ -91,7 +91,7 @@ export default function HomePage() {
 
   // * Wait for organization context before rendering SiteList to avoid "Organization Required" flash
   if (user && !user.org_id) {
-    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Switching Context..." />
+    return <LoadingOverlay logoSrc="/ciphera_icon_no_margins.png" title="Pulse" portal={false} />
   }
 
   return (

components/LoadingOverlay.tsx

@@ -6,11 +6,13 @@ import { createPortal } from 'react-dom'
 interface LoadingOverlayProps {
   logoSrc?: string
   title?: string
+  portal?: boolean
 }
 
 export default function LoadingOverlay({ 
   logoSrc = "/ciphera_icon_no_margins.png", 
-  title = "Pulse" 
+  title = "Pulse",
+  portal = true
 }: LoadingOverlayProps) {
   const [mounted, setMounted] = useState(false)
 
@@ -19,9 +21,7 @@ export default function LoadingOverlay({
     return () => setMounted(false)
   }, [])
 
-  if (!mounted) return null
+  const content = (
-
-  return createPortal(
     <div className="fixed inset-0 z-[100] flex items-center justify-center bg-white dark:bg-neutral-950 animate-in fade-in duration-200">
       <div className="flex flex-col items-center gap-6">
         <div className="flex items-center gap-3">
@@ -36,7 +36,13 @@ export default function LoadingOverlay({
         </div>
         <div className="h-8 w-8 animate-spin rounded-full border-4 border-neutral-200 border-t-brand-orange dark:border-neutral-800 dark:border-t-brand-orange" />
       </div>
-    </div>,
+    </div>
-    document.body
   )
+
+  if (portal) {
+    if (!mounted) return null
+    return createPortal(content, document.body)
+  }
+
+  return content
 }