claude:fix: auto-reload on stale lazy-route chunk to recover stuck navigations

After a redeploy, tabs holding old HTML reference chunk filenames that no
longer exist; the dynamic import rejects inside startTransition, React
keeps the old UI mounted and the URL change has no visible effect.
Wrap each route's import() with a one-shot sessionStorage-gated reload
and add a ChunkErrorBoundary as a backstop with a manual reload button.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: kuco23

src/assets/css/custom.css

@@ -284,3 +284,25 @@
     scroll-padding-left: 0;
   }
 }
+
+/* LAZY LOAD ERROR FALLBACK */
+
+.lazy-load-error {
+  max-width: 480px;
+  margin: 120px auto;
+  padding: 32px;
+  text-align: center;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.015);
+}
+
+.lazy-load-error h3 {
+  font-size: 1.2rem;
+  margin-bottom: 10px;
+}
+
+.lazy-load-error p {
+  color: rgba(255, 255, 255, 0.6);
+  margin-bottom: 22px;
+}

src/route/lazy.tsx

@@ -1,10 +1,63 @@
-import { Suspense } from "react";
+import { Component, lazy, Suspense, type ComponentType, type ReactNode } from "react";
 import { PreloaderContent } from "~/components/ui/preloader";
 
-const Lazy = ({ children }) => (
-  <Suspense fallback={<div className="preloader"><PreloaderContent /></div>}>
-    {children}
-  </Suspense>
-);
+const RELOAD_FLAG = 'stakecore:chunk-reload-attempted'
 
-export default Lazy;
+export function lazyWithReload<T extends ComponentType<any>>(
+  factory: () => Promise<{ default: T }>
+) {
+  return lazy(async () => {
+    try {
+      const mod = await factory()
+      sessionStorage.removeItem(RELOAD_FLAG)
+      return mod
+    } catch (err) {
+      if (sessionStorage.getItem(RELOAD_FLAG) !== '1') {
+        sessionStorage.setItem(RELOAD_FLAG, '1')
+        window.location.reload()
+        return new Promise<{ default: T }>(() => {})
+      }
+      throw err
+    }
+  })
+}
+
+class ChunkErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
+  state = { hasError: false }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error) {
+    console.error('Lazy route load failed:', error)
+  }
+
+  handleReload = () => {
+    sessionStorage.removeItem(RELOAD_FLAG)
+    window.location.reload()
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="lazy-load-error">
+          <h3>Couldn't load this page</h3>
+          <p>A new version may have been deployed. Reloading should fix it.</p>
+          <button className="theme-btn" onClick={this.handleReload}>Reload</button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+const Lazy = ({ children }: { children: ReactNode }) => (
+  <ChunkErrorBoundary>
+    <Suspense fallback={<div className="preloader"><PreloaderContent /></div>}>
+      {children}
+    </Suspense>
+  </ChunkErrorBoundary>
+)
+
+export default Lazy

src/route/router.jsx

@@ -1,16 +1,15 @@
-import { lazy } from "react";
 import { createHashRouter } from "react-router-dom";
 import RootLayout from "../layout/root";
 import Home from "../pages/home";
-import Lazy from "./lazy";
+import Lazy, { lazyWithReload } from "./lazy";
 
-const Contact = lazy(() => import("../pages/contact"));
-const About = lazy(() => import("../pages/about"));
-const Protocols = lazy(() => import("../pages/protocols"));
-const AvalancheValidatorProject = lazy(() => import("../pages/protocols/avalanche-validator/page"));
-const FlareValidatorProject = lazy(() => import("../pages/protocols/flare-validator/page"));
-const FlareFspProject = lazy(() => import("../pages/protocols/flare-fsp/page"));
-const SongbirdFspProject = lazy(() => import("../pages/protocols/songbird-fsp/page"));
+const Contact = lazyWithReload(() => import("../pages/contact"));
+const About = lazyWithReload(() => import("../pages/about"));
+const Protocols = lazyWithReload(() => import("../pages/protocols"));
+const AvalancheValidatorProject = lazyWithReload(() => import("../pages/protocols/avalanche-validator/page"));
+const FlareValidatorProject = lazyWithReload(() => import("../pages/protocols/flare-validator/page"));
+const FlareFspProject = lazyWithReload(() => import("../pages/protocols/flare-fsp/page"));
+const SongbirdFspProject = lazyWithReload(() => import("../pages/protocols/songbird-fsp/page"));
 
 
 export const router = createHashRouter([