Data fetching with React Router using loader functions [duplicate]

{
    path: "/app",
    element: <AppLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="discussions" />,
      },
      {
        path: "discussions",
        element: <Discussions />,
        loader: discussionsLoader,
        errorElement: .....
      }
    ]
  }

Here is the router structure. In the parent component I check for navigaion.state === “laoding” to render a loading indicator properly. But there is one problem.

If I actually want to start the React app with /app/discussions in my URL, then it will actually wait for this data to load before rendering any parent components and I end up with simply white screen untill the data is fetched.

Is there a work around? It would make more sense if actually parent components had gotten rendered, and then data fetching started 🙂