feat(FR-2521): add Suspense skeleton fallback to lazy-loaded pages (#6596)

Resolves #6595(FR-2521)

## Summary
- Wrap all 20 lazy-loaded pages in `routes.tsx` with `<Suspense fallback={<Skeleton active />}>` that were missing loading indicators
- Users now see an in-place skeleton instead of a blank screen during code-split chunk loading
- Consistent with the pattern already used by DashboardPage, ComputeSessionListPage, etc.

**Main layout pages (15)**: StartPage, MyEnvironmentPage, AgentSummaryPage, AdminSessionPage, EnvironmentPage, ResourcesPage, ResourcePolicyPage, ConfigurationsPage, MaintenancePage, DiagnosticsPage, BrandingPage, StorageHostSettingPage, Information, UserSettingsPage, UserCredentialsPage

**Root-level pages (5)**: InteractiveLoginPage, EmailVerificationPage, ChangePasswordPage, EduAppLauncherPage (×2 routes)

## Verification
```
=== ALL PASS ===
```

## Test plan
- [ ] Navigate to each affected page and verify skeleton appears during lazy load
- [ ] Verify no regressions on pages that already had Suspense boundaries
- [ ] `verify.sh` passes (Relay, Lint, Format, TypeScript)

🤖 Generated with [Claude Code](https://claude.ai/code)

Author: yomybaby

react/src/routes.tsx

@@ -149,7 +149,11 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   },
   {
     path: '/start',
-    element: <StartPage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <StartPage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.Start' },
   },
   {
@@ -317,13 +321,7 @@ export const mainLayoutChildRoutes: RouteObject[] = [
     Component: () => {
       const baiClient = useSuspendedBackendaiClient();
       return (
-        <Suspense
-          fallback={
-            <BAIFlex direction="column" style={{ maxWidth: 700 }}>
-              <Skeleton active />
-            </BAIFlex>
-          }
-        >
+        <Suspense fallback={<Skeleton active />}>
           {baiClient?.supports('model-card-v2') ? (
             <ModelStoreListPageV2 />
           ) : (
@@ -358,12 +356,20 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   },
   {
     path: '/my-environment',
-    element: <MyEnvironmentPage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <MyEnvironmentPage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.MyEnvironments' },
   },
   {
     path: '/agent-summary',
-    element: <AgentSummaryPage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <AgentSummaryPage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.AgentSummary' },
   },
   {
@@ -387,7 +393,11 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   {
     path: '/admin-session',
     handle: { labelKey: 'webui.menu.Sessions' },
-    Component: AdminSessionPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <AdminSessionPage />
+      </Suspense>
+    ),
   },
   {
     path: '/admin-serving',
@@ -434,7 +444,11 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   {
     path: '/environment',
     handle: { labelKey: 'webui.menu.Environments' },
-    Component: EnvironmentPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <EnvironmentPage />
+      </Suspense>
+    ),
   },
   {
     path: '/scheduler',
@@ -454,12 +468,20 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   {
     path: '/agent',
     handle: { labelKey: 'webui.menu.Resources' },
-    Component: ResourcesPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <ResourcesPage />
+      </Suspense>
+    ),
   },
   {
     path: '/resource-policy',
     handle: { labelKey: 'webui.menu.ResourcePolicies' },
-    Component: ResourcePolicyPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <ResourcePolicyPage />
+      </Suspense>
+    ),
   },
   {
     path: '/reservoir',
@@ -502,17 +524,29 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   },
   {
     path: '/settings',
-    element: <ConfigurationsPage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <ConfigurationsPage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.Configurations' },
   },
   {
     path: '/maintenance',
-    element: <MaintenancePage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <MaintenancePage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.Maintenance' },
   },
   {
     path: '/diagnostics',
-    element: <DiagnosticsPage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <DiagnosticsPage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.Diagnostics' },
   },
   {
@@ -531,7 +565,11 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   },
   {
     path: '/branding',
-    element: <BrandingPage />,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <BrandingPage />
+      </Suspense>
+    ),
     handle: { labelKey: 'webui.menu.Branding' },
   },
   {
@@ -548,17 +586,29 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   {
     path: '/storage-settings/:hostname',
     handle: { labelKey: 'storageHost.StorageSetting' },
-    Component: StorageHostSettingPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <StorageHostSettingPage />
+      </Suspense>
+    ),
   },
   {
     path: '/information',
     handle: { labelKey: 'webui.menu.Information' },
-    Component: Information,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <Information />
+      </Suspense>
+    ),
   },
   {
     path: '/usersettings',
     handle: { labelKey: 'webui.menu.Settings&Logs' },
-    Component: UserSettingsPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <UserSettingsPage />
+      </Suspense>
+    ),
   },
   {
     path: '/admin-dashboard',
@@ -576,7 +626,11 @@ export const mainLayoutChildRoutes: RouteObject[] = [
   {
     path: '/credential',
     handle: { labelKey: 'webui.menu.UserCredentials&Policies' },
-    Component: UserCredentialsPage,
+    element: (
+      <Suspense fallback={<Skeleton active />}>
+        <UserCredentialsPage />
+      </Suspense>
+    ),
   },
   {
     path: '/logs',
@@ -637,7 +691,9 @@ export const routes: RouteObject[] = [
             <LoginView waitForMainLayout={false} />
           </Suspense>
           <LogoutEventHandler />
-          <InteractiveLoginPage />
+          <Suspense fallback={<Skeleton active />}>
+            <InteractiveLoginPage />
+          </Suspense>
         </DefaultProvidersForReactRoot>
       </BAIErrorBoundary>
     ),
@@ -648,7 +704,9 @@ export const routes: RouteObject[] = [
     element: (
       <BAIErrorBoundary>
         <DefaultProvidersForReactRoot>
-          <EmailVerificationPage />
+          <Suspense fallback={<Skeleton active />}>
+            <EmailVerificationPage />
+          </Suspense>
         </DefaultProvidersForReactRoot>
       </BAIErrorBoundary>
     ),
@@ -659,7 +717,9 @@ export const routes: RouteObject[] = [
     element: (
       <BAIErrorBoundary>
         <DefaultProvidersForReactRoot>
-          <ChangePasswordPage />
+          <Suspense fallback={<Skeleton active />}>
+            <ChangePasswordPage />
+          </Suspense>
         </DefaultProvidersForReactRoot>
       </BAIErrorBoundary>
     ),
@@ -670,7 +730,9 @@ export const routes: RouteObject[] = [
     element: (
       <BAIErrorBoundary>
         <DefaultProvidersForReactRoot>
-          <EduAppLauncherPage />
+          <Suspense fallback={<Skeleton active />}>
+            <EduAppLauncherPage />
+          </Suspense>
         </DefaultProvidersForReactRoot>
       </BAIErrorBoundary>
     ),
@@ -681,7 +743,9 @@ export const routes: RouteObject[] = [
     element: (
       <BAIErrorBoundary>
         <DefaultProvidersForReactRoot>
-          <EduAppLauncherPage />
+          <Suspense fallback={<Skeleton active />}>
+            <EduAppLauncherPage />
+          </Suspense>
         </DefaultProvidersForReactRoot>
       </BAIErrorBoundary>
     ),