Loading Status of Lazy Routes

[aress31]

I am currently working on implementing lazy loading within my application. Below are the key snippets from my code:

// publicRoute.js
const publicRoutes = [
  {
    label: "Home",
    path: "/",
    lazy: async () => {
      const module = await import("../../views/public/HomeView");
      return { Component: module.default };
    },
  },
  {
    label: "About",
    path: "/about",
    lazy: async () => {
      const module = await import("../../views/public/AboutView");
      return { Component: module.default };
    },
  },
  // --- SNIP ---
]

As evident below, I have implemented a DataRouter in accordance with the prerequisites outlined in the documentation for enabling lazy loading functionality.

// routerConfig.js
const routerConfig = createBrowserRouter([
  {
    children: [
      {
        children: [...publicRoutes, notFoundRoute],
        id: "public",
      },
    ],
    element: <App />,
    path: "/",
  },
]);

// index.js
const Index = () => {
  return (
    <React.StrictMode>
      <RouterProvider router={routerConfig}>
        <App />
      </RouterProvider>
    </React.StrictMode>
  );
};

const container = document.getElementById("app");
const root = createRoot(container);
root.render(<Index />);

// App.js
const App = () => {
  const { state = "loading" } = useNavigation();
  if (state === "loading") console.log("LOADING....");
  console.log("state", state);

  return (
    // --- SNIP ---
    <Outlet />
  );
};

export default App;

The loading state do not seem to ever change and is stuck to idle. Therefore, I am not in a position to conditionally render a loading screen. I have followed the documentation to the best of my abilities and I do not see where I am going wrong...

Moreover, upon inspecting the Network tab in the Dev Tools, I noticed that my bundle does not appear to be chunked as expected. Why is this the case? Isn't the purpose of lazy loading to reduce the bundle size?

Any help would be appreciated, and documenting this specific use case in details could be beneficial to the community IMHO.

[aress31]

Up!

[brophdawg11]

Something is not quite right about your setup - you should not be rendering <App> as a child of <RouterProvider>, you already have it defined as the root route element. If you can provide a minimal reproduction on stackblitz or codesandbox that would be helpful.