page loading

src/App.tsx

@@ -3,6 +3,7 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 import { Spinner } from '@astryxdesign/core/Spinner';
 import { RequireRole, useAuth } from '@/auth/AuthContext';
 import { HOME_ROUTE } from '@/auth/roles';
+import { withStaleChunkRecovery } from '@/lib/staleChunk';
 import { LoginPage } from '@/features/auth/LoginPage';
 import { NearleAdminShell } from '@/features/nearle-admin/NearleAdminShell';
 import { StoreAdminShell } from '@/features/store-admin/StoreAdminShell';
@@ -15,8 +16,17 @@ import { StoreUserShell } from '@/features/store-user/StoreUserShell';
  * means every visitor downloads the spreadsheet importer to look at a dashboard.
  * That is the one thing from it worth deliberately not copying.
  */
+/**
+ * Split pages recover from a deploy that lands mid-session.
+ *
+ * `withStaleChunkRecovery` is the difference between "Inventory is broken" and
+ * a reload nobody notices: the hashed filename this tab remembers stops
+ * existing the moment a new build ships, and the import 404s. See
+ * `lib/staleChunk.ts` — real errors still surface, only the missing chunk is
+ * retried.
+ */
 const named = <T extends string>(key: T, loader: () => Promise<Record<T, ComponentType>>) =>
-  lazy(() => loader().then((module) => ({ default: module[key] })));
+  lazy(withStaleChunkRecovery(() => loader().then((module) => ({ default: module[key] }))));
 
 const StoresPage = named('StoresPage', () => import('@/features/nearle-admin/pages/StoresPage'));
 const StoreDetailPage = named('StoreDetailPage', () => import('@/features/nearle-admin/pages/StoreDetailPage'));