perf: optimize login first screen

app/(auth)/auth/login/page.tsx

@@ -5,16 +5,16 @@ import { useSearchParams } from "next/navigation"
 import { useRouter } from "next/navigation"
 import { useTranslation } from "react-i18next"
 import { LoginForm, type LoginMethod } from "@/components/auth/login-form"
+import { AppLoadingShell } from "@/components/app-loading-shell"
 import { useAuth } from "@/contexts/auth-context"
-import { useFirstAccessibleDashboardRoute } from "@/hooks/use-first-accessible-dashboard-route"
 import { useMessage } from "@/lib/feedback/message"
 import { configManager } from "@/lib/config"
 import { fetchOidcProviders, initiateOidcLogin } from "@/lib/oidc"
 import type { OidcProvider } from "@/types/config"
 
 export default function LoginPage() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-background" />}>
+    <Suspense fallback={<AppLoadingShell />}>
       <LoginPageContent />
     </Suspense>
   )
@@ -25,7 +25,6 @@ function LoginPageContent() {
   const searchParams = useSearchParams()
   const message = useMessage()
   const { login, isAuthenticated } = useAuth()
-  const { route: firstAccessibleRoute, isReady: hasResolvedFirstRoute } = useFirstAccessibleDashboardRoute()
   const { t } = useTranslation()
 
   const [method, setMethod] = useState<LoginMethod>("accessKeyAndSecretKey")
@@ -41,9 +40,9 @@ function LoginPageContent() {
   const [oidcProviders, setOidcProviders] = useState<OidcProvider[]>([])
 
   useEffect(() => {
-    if (!isAuthenticated || !hasResolvedFirstRoute || !firstAccessibleRoute) return
-    router.replace(firstAccessibleRoute)
-  }, [isAuthenticated, hasResolvedFirstRoute, firstAccessibleRoute, router])
+    if (!isAuthenticated) return
+    router.replace("/")
+  }, [isAuthenticated, router])
 
   useEffect(() => {
     if (searchParams.get("unauthorized") === "true") {
@@ -52,13 +51,38 @@ function LoginPageContent() {
     }
   }, [searchParams, message, t, router])
 
-  // Fetch OIDC providers on mount
+  // Fetch OIDC providers after the first paint path has had a chance to settle.
   useEffect(() => {
-    configManager.loadConfig().then((config) => {
-      if (config?.serverHost) {
-        fetchOidcProviders(config.serverHost).then(setOidcProviders)
+    let cancelled = false
+    const loadOidcProviders = () => {
+      configManager.loadConfig().then((config) => {
+        if (cancelled) return
+        if (config?.serverHost) {
+          fetchOidcProviders(config.serverHost).then((providers) => {
+            if (!cancelled) setOidcProviders(providers)
+          })
+        }
+      })
+    }
+
+    const idleWindow = window as Window & {
+      requestIdleCallback?: (callback: IdleRequestCallback) => number
+      cancelIdleCallback?: (handle: number) => void
+    }
+
+    if (typeof idleWindow.requestIdleCallback === "function") {
+      const idleId = idleWindow.requestIdleCallback(loadOidcProviders)
+      return () => {
+        cancelled = true
+        idleWindow.cancelIdleCallback?.(idleId)
       }
-    })
+    }
+
+    const timerId = window.setTimeout(loadOidcProviders, 0)
+    return () => {
+      cancelled = true
+      window.clearTimeout(timerId)
+    }
   }, [])
 
   const handleLogin = async (e: React.FormEvent) => {

app/(auth)/auth/oidc-callback/page.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from "react"
 import { useRouter } from "next/navigation"
 import { useAuth } from "@/contexts/auth-context"
-import { useFirstAccessibleDashboardRoute } from "@/hooks/use-first-accessible-dashboard-route"
 import { useMessage } from "@/lib/feedback/message"
 import { parseOidcCallback } from "@/lib/oidc"
 import { isSafeRedirectPath } from "@/lib/routes"
@@ -12,7 +11,6 @@ import { useTranslation } from "react-i18next"
 export default function OidcCallbackPage() {
   const router = useRouter()
   const { loginWithStsCredentials, isAuthenticated } = useAuth()
-  const { route: firstAccessibleRoute, isReady: hasResolvedFirstRoute } = useFirstAccessibleDashboardRoute()
   const message = useMessage()
   const { t } = useTranslation()
   const processed = useRef(false)
@@ -63,10 +61,8 @@ export default function OidcCallbackPage() {
       return
     }
 
-    if (hasResolvedFirstRoute && firstAccessibleRoute) {
-      router.replace(firstAccessibleRoute)
-    }
-  }, [credentialsSet, isAuthenticated, hasResolvedFirstRoute, firstAccessibleRoute, router])
+    router.replace("/")
+  }, [credentialsSet, isAuthenticated, router])
 
   return (
     <div className="flex min-h-screen items-center justify-center bg-muted">

app/(auth)/config/page.tsx

@@ -5,6 +5,7 @@ import Link from "next/link"
 import Image from "next/image"
 import { useRouter } from "next/navigation"
 import { useTranslation } from "react-i18next"
+import { AppLoadingShell } from "@/components/app-loading-shell"
 import { Button } from "@/components/ui/button"
 import { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
@@ -20,7 +21,7 @@ import { getThemeManifest } from "@/lib/theme/manifest"
 
 export default function ConfigPage() {
   return (
-    <Suspense fallback={<div className="min-h-screen bg-background" />}>
+    <Suspense fallback={<AppLoadingShell />}>
       <ConfigPageContent />
     </Suspense>
   )

app/(dashboard)/layout.tsx

@@ -2,21 +2,33 @@ import { SidebarProvider, SidebarInset } from "@/components/ui/sidebar"
 import { AppSidebar } from "@/components/app-sidebar"
 import { AppTopNav } from "@/components/app-top-nav"
 import { DashboardAuthGuard } from "@/components/dashboard-auth-guard"
+import { ApiProvider } from "@/contexts/api-context"
+import { S3Provider } from "@/contexts/s3-context"
+import { TaskProvider } from "@/contexts/task-context"
+import { PermissionsProvider } from "@/hooks/use-permissions"
 
 export default function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
-    <DashboardAuthGuard>
-      <SidebarProvider defaultOpen>
-        <AppSidebar />
-        <SidebarInset>
-          <div className="flex flex-1 flex-col gap-4 px-4 pb-6 pt-0 sm:px-6">
-            <AppTopNav />
-            <main id="main-content" tabIndex={-1} className="min-w-0 flex-1 scroll-mt-16">
-              {children}
-            </main>
-          </div>
-        </SidebarInset>
-      </SidebarProvider>
-    </DashboardAuthGuard>
+    <ApiProvider>
+      <S3Provider>
+        <TaskProvider>
+          <PermissionsProvider>
+            <DashboardAuthGuard>
+              <SidebarProvider defaultOpen>
+                <AppSidebar />
+                <SidebarInset>
+                  <div className="flex flex-1 flex-col gap-4 px-4 pb-6 pt-0 sm:px-6">
+                    <AppTopNav />
+                    <main id="main-content" tabIndex={-1} className="min-w-0 flex-1 scroll-mt-16">
+                      {children}
+                    </main>
+                  </div>
+                </SidebarInset>
+              </SidebarProvider>
+            </DashboardAuthGuard>
+          </PermissionsProvider>
+        </TaskProvider>
+      </S3Provider>
+    </ApiProvider>
   )
 }

app/layout.tsx

@@ -3,10 +3,6 @@ import "./globals.css"
 import { ThemeProvider } from "@/components/providers/theme-provider"
 import { I18nProvider } from "@/components/providers/i18n-provider"
 import { AuthProvider } from "@/contexts/auth-context"
-import { ApiProvider } from "@/contexts/api-context"
-import { S3Provider } from "@/contexts/s3-context"
-import { TaskProvider } from "@/contexts/task-context"
-import { PermissionsProvider } from "@/hooks/use-permissions"
 import { AppUiProvider } from "@/components/providers/app-ui-provider"
 import { getThemeManifest } from "@/lib/theme/manifest"
 
@@ -28,15 +24,7 @@ export default function RootLayout({
         <ThemeProvider>
           <I18nProvider>
             <AuthProvider>
-              <ApiProvider>
-                <S3Provider>
-                  <TaskProvider>
-                    <PermissionsProvider>
-                      <AppUiProvider>{children}</AppUiProvider>
-                    </PermissionsProvider>
-                  </TaskProvider>
-                </S3Provider>
-              </ApiProvider>
+              <AppUiProvider>{children}</AppUiProvider>
             </AuthProvider>
           </I18nProvider>
         </ThemeProvider>

components/app-loading-shell.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+export function AppLoadingShell() {
+  return (
+    <div className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-muted p-4 sm:p-6 lg:p-20">
+      <div className="z-10 mx-auto flex w-full max-w-7xl flex-col overflow-hidden border bg-card shadow-none lg:min-h-[560px] lg:flex-row">
+        <div className="hidden w-1/2 border-e bg-muted/40 p-16 lg:flex lg:flex-col lg:justify-center">
+          <div className="h-6 w-28 animate-pulse bg-muted-foreground/20" />
+          <div className="mt-8 space-y-3">
+            <div className="h-10 w-72 max-w-full animate-pulse bg-muted-foreground/20" />
+            <div className="h-10 w-56 max-w-full animate-pulse bg-muted-foreground/20" />
+            <div className="h-5 w-64 max-w-full animate-pulse bg-muted-foreground/15" />
+          </div>
+        </div>
+        <div className="flex w-full flex-col items-center justify-center bg-card lg:w-1/2">
+          <div className="w-full max-w-sm space-y-6 p-4 sm:p-7">
+            <div className="h-6 w-28 animate-pulse bg-muted-foreground/20" />
+            <div className="grid grid-cols-2 gap-2">
+              <div className="h-10 animate-pulse bg-muted" />
+              <div className="h-10 animate-pulse bg-muted" />
+            </div>
+            <div className="space-y-6">
+              <div className="space-y-2">
+                <div className="h-4 w-20 animate-pulse bg-muted-foreground/15" />
+                <div className="h-10 animate-pulse bg-muted" />
+              </div>
+              <div className="space-y-2">
+                <div className="h-4 w-16 animate-pulse bg-muted-foreground/15" />
+                <div className="h-10 animate-pulse bg-muted" />
+              </div>
+              <div className="h-10 animate-pulse bg-primary/25" />
+            </div>
+            <div className="flex justify-center gap-4">
+              <div className="size-8 animate-pulse bg-muted" />
+              <div className="size-8 animate-pulse bg-muted" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

components/language-switcher.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next"
 import { RiTranslate2 } from "@remixicon/react"
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-import { LOCALE_CODES, type Locale } from "@/lib/i18n"
+import { changeLocale, LOCALE_CODES, type Locale } from "@/lib/i18n"
 
 const languageConfig: Record<string, { text: string; icon: typeof RiTranslate2 }> = {
   en: { text: "English", icon: RiTranslate2 },
@@ -46,7 +46,7 @@ export function LanguageSwitcher() {
       />
       <DropdownMenuContent className="w-40" align="start">
         {options.map(({ label, key }) => (
-          <DropdownMenuItem key={key} onClick={() => i18n.changeLanguage(key)}>
+          <DropdownMenuItem key={key} onClick={() => void changeLocale(key)}>
             {label}
           </DropdownMenuItem>
         ))}

components/providers/i18n-provider.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react"
 import { DEFAULT_LOCALE, initI18n, isRtlLocale, normalizeLocale } from "@/lib/i18n"
 import { DirectionProvider } from "@/components/ui/direction"
+import { AppLoadingShell } from "@/components/app-loading-shell"
 import i18n from "i18next"
 
 type Dir = "ltr" | "rtl"
@@ -50,7 +51,7 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
   }, [])
 
   if (!ready) {
-    return <div className="min-h-screen bg-background" />
+    return <AppLoadingShell />
   }
 
   return <DirectionProvider direction={dir}>{children}</DirectionProvider>

contexts/auth-context.tsx

@@ -2,7 +2,6 @@
 
 import { createContext, useCallback, useContext, useMemo, type ReactNode } from "react"
 import type { AwsCredentialIdentity, AwsCredentialIdentityProvider } from "@aws-sdk/types"
-import { getStsToken } from "@/lib/sts"
 import type { SiteConfig } from "@/types/config"
 import { getLoginRoute } from "@/lib/routes"
 import { useLocalStorage } from "@/hooks/use-local-storage"
@@ -95,6 +94,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         customConfig = await configManager.loadConfig()
       }
 
+      const { getStsToken } = await import("@/lib/sts")
       const credentialsResponse = await getStsToken(credentials, "arn:aws:iam::*:role/Admin", customConfig)
 
       setCredentials({