React lazy API with the createBrowserRouter

[User6531]

Hey y'all,
I'm looking to utilize the React lazy API with the createBrowserRouter function.
Below is my configuration, and I'm searching for a way to implement lazy loading and suspense with it.

import App from "../../App";
import ErrorBoundaryPage from "../../containers/ErrorBoundaryPage/ErrorBoundaryPage";
import Main from "../../containers/Layout/Main/Main";
import AppCatalogPage from "../../containers/AppCatalogPage/AppCatalogPage";
import SettingsPage from "../../containers/SettingsPage/SettingsPage";

const router = createBrowserRouter([
  {
    element: <App />,
    errorElement: <ErrorBoundaryPage />,
    children: [
      {
        element: <Main />,
        errorElement: <ErrorBoundaryPage />,
        children: [
          {
            path: routesPaths.main,
            element: <Navigate to={routesPaths.appCatalog} />,
          },
          {
            path: routesPaths.appCatalog,
            element: <AppCatalogPage />,
          },
          {
            path: routesPaths.settings,
            element: <SettingsPage />,
          },
        ],
      },
    ],
  },
]);

[User6531]

@brophdawg11, I was wondering if you would be willing to assist me.

[brophdawg11]

Instead of React.lazy (which introduces render-fetch waterfalls) you probably want to use the new route.lazy feature: https://remix.run/blog/lazy-loading-routes

[User6531]

Thank you, this is very useful.

[huijiewei]

const SettingsPage = lazy(() => import('../../containers/SettingsPage/SettingsPage'));

or

{ path: routesPaths.appCatalog, Component: lazy(() => import('../../containers/AppCatalogPage/AppCatalogPage')) },

[User6531]

Thank you for your answer.
Should I wrap each item in suspense like that

{
  path: routesPaths.settings,
  element: (
    <Suspense fallback={<>loading</>}>
      <SettingsPage />
    </Suspense>
  ),
},

or can I wrap it in the index file in general?

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Provider store={store}>
    <ThemeProvider>
      <GlobalStyle />
      <Suspense fallback={<>loading</>}>
        <RouterProvider router={router} />
      </Suspense>
    </ThemeProvider>
  </Provider>,
);

[User6531]

I just tried both options, and both of them work.
However, the first one shows the loading message inside my layout, while the second one shows it in full screen.

I don't have any further questions at the moment. Thank you very much!

[huijiewei]

mybay you not necessary wrap every item in Supense, you can try wrap Outlet with Suspense

[User6531]

Awesome, thanks.

[pagarevijayy]

helpful discussion.