The loader prevents application rendering and displays a blank screen

[hungtcs]

Recently, I started experimenting with new routing features, and one of them involves using a loader to load data.

Here is the code for my project.
The loader utilizes a setTimeout function to introduce a 10-second delay.
When reload page on /page1, the header of the app will not be displayed immediately but needs to wait for 10s (the page1 loader complete), in fact, nothing is rendered at this time.

I don't understand why the app needs to wait for the loader to end before rendering,
I know about defer, but that's not what this question is about.
In my understanding, only the outlet part should be blank, not all the app.

For convenience, here is a codesandbox

// ./page1/index.tsx
import { useLoaderData } from "react-router-dom";

export function Component() {
  const data = useLoaderData();

  return (
    <div>
      <h2>this is page 1</h2>
      <fieldset>
        <pre>
          <code>{JSON.stringify(data, null, 2)}</code>
        </pre>
      </fieldset>
    </div>
  );
}

export function loader() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("page 1 data");
    }, 10000);
  });
}

// app.tsx
import { Outlet } from "react-router-dom";
import { Suspense } from "react";

export default function App() {
  return (
    <div className="App">
      <header>App Header</header>
      <hr />
      <main>
        {/* not working with lazy... */}
        <Suspense fallback="app loading...">
          <Outlet />
        </Suspense>
      </main>
    </div>
  );
}

// main.tsx
import App from "./App";
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider, createBrowserRouter, Navigate } from "react-router-dom";

const rootElement = document.getElementById("root")!;
const root = ReactDOM.createRoot(rootElement);

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <Navigate to="page1" />
      },
      {
        path: "page1",
        lazy: () => import("./page-1")
      }
    ]
  }
]);

root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

[Toshinaki]

Why is this closed?
@hungtcs did you find a solution?

[hungtcs]

@Toshinaki

Sorry I forgot to fill in the reply.

After some testing, I found that only the fallbackElement property of RouterProvider works, which can be used to display a full-screen loading state.

I also tested the v7_startTransition flag, but it didn't work as I thought.

https://codesandbox.io/s/priceless-hofstadter-jnnlsw?file=/src/index.tsx

[Toshinaki]

Thank you!👍
seems that fallbackElement is the only way, for now.
not what I wanted though, I'd like to wrap part of the page components, so that Suspense fallback show up on part of my page.
I'm going back to the old way to load data.😅

[loia5tqd001]

Am I understanding correctly?

Traditional useEffect fetching:
Fetch JS assets -> Render component -> Component mounted, starts fetching data -> Data fetched.
Blank screen...........Blank screen...............Spinner.............................................................Full

With React Router's loader:
Fetch JS assets -> Starts fetching data with loader -> Render component -> Data fetched
Blank screen...........Blank screen...................................Blank screen................Full

It's just less spinner, replaced by blankscreen (or fallbackElement), but it's only improving UX (loading feeling), not the real fetching time is shortened?

Maybe for deeply nested routes with waterfalls, it'd be different?

[hungtcs]

In my understanding, If you don't use defer and not fallback element then the order should be

Fetch JS assets ->  Starts fetching data with loader ->  Data fetched ->  Render component
Blank screen.............Blank screen...............................................Blank screen......... Full

Moreover, multiple loaders in nested routes are parallel.

but I am also a newbie, for reference only.

[loia5tqd001]

OK, so the optimization here is "multiple loaders in nested routes are parallel". And moreover, the defer. I got the point now. Thanks @hungtcs