How to use dynamic React component imports using React.lazy in v7?

[AuroraLS3]

Alright, so I've implemented code splitting in my React application using React.lazy. The upgrade guide from v6 is just saying "It's bad React, fix it", when this approach was recommended a couple years ago https://legacy.reactjs.org/docs/code-splitting.html - So how do I fix it?

In my approach the React.Suspense boundary is within the Route element, because only the specific elements that are changing should wait for being loaded - so that the navigation bar doesn't disappear while loading the page.

Example code

Here's a shortened example from my App - the actual app has dynamic imports for ~30 components, splitting by view.

import React, {useCallback} from "react";
import {BrowserRouter, Navigate, Route, Routes} from "react-router-dom";
import ErrorView from "./views/ErrorView";
import ErrorBoundary from "./components/ErrorBoundary";

const ServerPage = React.lazy(() => import("./views/layout/ServerPage"));
const ServerOverview = React.lazy(() => import("./views/server/ServerOverview"));

const OverviewRedirect = () => {
    return (<Navigate to={"overview"} replace={true}/>)
}

const Lazy = ({children}) => {
    const fallbackFunction = useCallback((error) => <ErrorView error={error}/>, []);
    return (
        <React.Suspense fallback={<></>}>
            <ErrorBoundary fallbackFunction={fallbackFunction}>
                {children}
            </ErrorBoundary>
        </React.Suspense>
    );
}

function App() {
    axios.defaults.withCredentials = true;

    return (
        <BrowserRouter basename={getBasename()}>
          <Routes>
                <Route path="/server/:identifier" element={<Lazy><ServerPage/></Lazy>}>
                    <Route path="" element={<OverviewRedirect/>}/>
                    <Route path="overview" element={<Lazy><ServerOverview/></Lazy>}/>
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

export default App;

• In this example ServerPage contains the navigation bar.
• ServerOverview contains the cards that appear as the "main content" of the page.

The problem

In v6 this results in a behavior that upon clicking a Link, the router switches to an empty view until the Suspense resolves the required parts of the page, and then renders.

click
-> transition to empty page (~ milliseconds response time)
-> wait for dynamic imports to load (~0.2s-3s)
-> transition to the loaded page

In v7, I assume because of the startTransition change, upon navigate() nothing happens until the Suspense resolves - This leads to poor user experience, because there's a visible delay between user clicking and things happening

click
-> wait for dynamic imports to load (~0.2s-3s)
-> transition to the loaded page

How do I change this so that the router transitions to an empty view immediately to wait for the dynamic imports to load? I don't want to load the whole application in the background.