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.

[enchance]

Here's the solution I made to batch load several routes instead of getting them per component. This way I can group related pages together such as all settings pages, admin pages, etc.

BatchLazy.tsx

import React from 'react';
import {Outlet} from "react-router-dom";

// Do not lazy load here
import FooView from "@views/FooView.tsx";
import BarView from "@views/BarView.tsx";


const BatchLazy = () => <Outlet />

// Export them or they'll be stripped off
export {FooView, BarView}
export default BatchLazy

routes.tsx

const BatchLazy = lazy(() => import('@config/routes/BatchLazy.tsx'));
// Lazy load `FooView` and `BarView` only so you can reference them in the routes
// By the time you open it they would have already been loaded by BatchLazy anyway
const FooView = lazy(() => import('@views/FooView.tsx'));
const BarView = lazy(() => import('@views/BarView.tsx'));

export const routes = (isAuth: boolean) => createBrowserRouter([
  {path: '/', element: (
      <Suspense fallback={'Loading...'}>
        <BatchLazy />
      </Suspense>
    ), children: [
      {path: 'foo', Component: FooView},
      {path: 'bar', Component: BarView},
  ]},
]);

It works for me but I sure wish there was a build-in way to do this using v6.