Lazy Routes, Suspense and Loading Transitions

const Admin = lazy(() => import('./features/admin/AdminPage'))
const Editor = lazy(() => import('./features/editor/EditorPage'))

<Route
  path="/admin"
  element={
    <Suspense fallback={<PageSkeleton />}>
      <Admin />
    </Suspense>
  }
/>

// Put the Suspense boundary inside the layout, not around it —
// otherwise the header and nav disappear during every transition
// and the whole page flashes.

// Worth splitting: admin areas, the code editor, chart libraries,
// rich text editors, PDF generation, anything most visitors never open.
// Not worth splitting: small components on the critical path — an
// extra request costs more than the bytes saved.

// With React Router's own lazy, the route module itself is split,
// loader included:
{ path: 'admin', lazy: () => import('./routes/admin') }

// The chunk downloads when the user hovers or focuses the link —
// typically 200-300ms before the click lands
function PrefetchLink({ to, load, children }) {
  const prefetch = () => { load() }
  return (
    <Link to={to} onMouseEnter={prefetch} onFocus={prefetch}>
      {children}
    </Link>
  )
}
<PrefetchLink to="/admin" load={() => import('./features/admin/AdminPage')}>

// Or prefetch on idle for a route you know most users reach:
useEffect(() => {
  const id = requestIdleCallback(() => import('./features/editor/EditorPage'))
  return () => cancelIdleCallback(id)
}, [])

// useTransition keeps the current page interactive during the
// transition instead of dropping straight to a skeleton:
const [isPending, startTransition] = useTransition()
startTransition(() => navigate('/admin'))
{isPending && <TopProgressBar />}

// You deploy. Hashed filenames change and old chunks are removed.
// A user with the page still open clicks a lazy route:
//   "Failed to fetch dynamically imported module"
// The app appears broken, and a refresh silently fixes it — which
// is why this often goes unreported and unfixed for months.

// Catch it and offer the reload
class ChunkErrorBoundary extends Component {
  state = { failed: false }
  static getDerivedStateFromError(error) {
    return { failed: /dynamically imported module|Loading chunk/i.test(error.message) }
  }
  render() {
    if (this.state.failed) return (
      <div role="alert">
        <p>A new version is available.</p>
        <button onClick={() => location.reload()}>Reload</button>
      </div>
    )
    return this.props.children
  }
}

// Better still: keep old chunks available for a while after deploy,
// and detect a new build version to prompt a reload proactively.