v6.4: How to show Pending UI in case of slow loader

[devpeerapong]

Super excite about v6.4 release and now I'm migrating my project to use loader and action.
But unfortunately our backend on dev env has super slow cold start (~5 seconds).
So when we click the side menu to navigate. Nothing happens. Even the active state on the menu.
It seems like react-router is waiting for the loader to resolve and then start the transition.

Is there a way to show Pending UI when the loader is loading ?
Like when you use React.lazy with Suspense
I skim through the Remix & React Router 6.4 Documentation but found nothing about Pending UI.

Here is the demo.
https://stackblitz.com/edit/github-e5anhv?file=src%2Froutes%2Froot.jsx

similar to the demo in v6.4 release, but with the delay on noteLoader and NavLink on the side navigation.
notice that when we click the note, nothing happens. Until 2 seconds later then the page appears and the link now becomes red
(active state).

[tommie-lie]

<Suspense> relies on a promise being thrown, which the <Outlet> doesn't do while the route's loader is still running.
Instead, you can use useNavigation to access the current navigation state and show a loading component:

export default function Root() {
  const notes = useLoaderData();
  const { state } = useNavigation();

  return (
    <>
      {state === 'loading' && (
        <progress
          style={{
            position: 'absolute',
            top: '0',
            left: '0',
            width: '100vw',
          }}
        />
      )}
      <div style={{ display: 'flex' }}>
        {/* same code as before */}
      </div>
    </>
  );
}```

[devpeerapong]

Thank for the suggestion, I was able to show loading state when page changed and now got hit with another issue.
useNavigation only works for global loading indicators.
If your nested route has a loader that depends on URLSearchParams (ex. pagination) and you apply this pattern then your parent and nested route will both show loading indicator.

as you can see in https://stackblitz.com/edit/github-e5anhv-w9jwwf

When you switch notes or paginate comments, you will always see both Page Loading and Comment Loading.
Is there a way to limit the navigation in the route scope ? like useLoaderData for route's loader

[sanelaxm]

@devpeerapong Any luck finding a work around? I have the same exact scenario I am running into

[pawelphilipczyk]

I'm trying to do the same thing so I'll reiterate the question asked. I've got this example that has a home page and about page:
https://codesandbox.io/s/remix-router-in-react-js-forked-2uuqcd

When I navigate to the about page which has an artificially delayed loader, I can show a spinner in a similar way as pointed above.

The problem is it seems the route does not render my "page" component until its loader is finished. In this case, is there a possibility to render a fallback element for it?

Adding to that also seems the fallbackElement on the DataBrowserRouter in my example is not rendering as well.

[tommie-lie]

Well, that's kinda what the data routing is there for: render the route only when the data is available. What do you expect the rendering to look like before your loader is finished after you have clicked the About button? Do you want to not show the previous page? In this case, you can render your <Outlet /> conditionally: https://codesandbox.io/s/remix-router-fallback-ui-forked-kz0x1l?file=/src/App.js

You can also replace the <Outlet /> with a full-screen gray overlay (to indicate that the user cannot interact with the page) or a full-screen animation.
Generally, it's up to you to decide what should happen during this "in-between" loading state. The default behaviour of react-router mimicks the browser's behaviour in a SSR/static content sitation: show the old page until the new page is loaded. If you want to override this behaviour, I think using the navigation state like above to replace the old page is the only solution.

About your issue with <DataBrowserRouter>'s fallbackElement prop: I think this is a problem with your Ionic setup. The fallbackElement is rendered instead of all children during the first mount of <DataBrowserRouter> until the first route has completely been resolved. This means you render a <IonSpinner> component (your fallback) before mounting your <App> component. I made your example show the fallback by moving the call to setupIonicReact just before the root.render call (in index.js), but I don't know anything about Ionic, so I'm not sure whether this is the intended way to use it or if you should rather put your routing into a <IonApp>.

P.S.: I noticed you tried passing a fallbackElement prop to a <Route> element. <Route>s don't have a fallback.

[mattiaz9]

Well, that's kinda what the data routing is there for: render the route only when the data is available.

I wish that was a user's choice. Sometimes it makes more sense, or maybe is better for the ux, to show a placeholder loading.

Something like this:

// default behaviour
<Route path="/" loader={...} loadingMode="blocking"  />

// not blocking
<Route path="/" loader={...} loadingMode="render"  />

And in the component:

type PageData = { ... }

const Page = () => {
  const { data, isLoading } = useLoaderData<PageData>()

  if (isLoading) return <Placeholder />

  return <DefaultPage />
}

When in blocking mode isLoading would be always false because we already have the data.

[tommie-lie]

I somehow feel it already is the user's choice. You can opt-out of data routes and roll your own data fetching, using swr, react-fetch-hook, react-query or using useEffect/useState directly. I think those libraries might be closer to what you are expecting if you want to have a isLoading state.
Or you can achieve something similar to your example by using the structure from my sandbox and putting the placeholder stuff in a layout route. Sure, it's not a prop on the <Route> component, but is it really that common to have this behaviour only on one single route in a larger application? I think most often you'll have some sort of layout route that provides a menu, titlebar, other stuff, and then have a "main area" which differs by route.
Basically like this:

function PageWithLoadingPlaceholder() {
  const { state } = useNavigation();
  
  if (state === "loading") {
    return <Placeholder />;
  }

  return <Outlet />;
}

function App() {
  return (
    <DataBrowserRouter>
      <Route path="/" element={<Layout />}>
        <Route element={<PageWithLoadingPlaceholder />}>
          <Route index loader={loader} element={<Page />} />
          <Route path="/a" loader={aLoader} element={<PageA />} />
          <Route path="/b" loader={bLoader} element={<PageB />} />
        </Route>
      </Route>
    </DataBrowserRouter>
  );
}

[pawelphilipczyk]

I've played a bit more with those loaders, and the above approach is okay in some cases.

The problem is when I want to render a different skeleton per route - that was what I originally tried to solve.

Here's what I've come up with so far:

• Some routes' elements are rendered inside Suspense with different fallback per element,
• There is a withSuspense higher-order function to wrap loaders of those routes,
• Components rendered by routes with suspense have to call the value returned from useLoaderData because it's a function,
• This is the first time I'm trying to use Suspense in any real-world scenario so I'm pretty sure things could be improved with Proxy or some suspense-enabled data fetching library would do the trick.

https://stackblitz.com/edit/github-tyjpmp-n9rngm?file=src%2Fmain.jsx

Note: for some reason when I edit something and save I'm getting this A router only accepts one active subscriber error and I'm not sure it's something wrong with Stackblitz or my code (probably the latter one is true).

[pawelphilipczyk]

Looking at this PR I'm thinking this is exactly what will be handled in a better way with deferred responses:
https://github.com/remix-run/react-router/pull/9061/files

[brophdawg11]

Yep defer is what y'all are looking for here - let us know if this solves your use cases :)

https://beta.reactrouter.com/en/dev/guides/deferred

Also FWIW, the other idiomatic approach (before defer) would have been to useFetcher in your components and show skeletons/data based on those calls which would give you the "render then fetch" behavior you're looking for, instead of the default "fetch then render" behavior.

[JakubAndrysek]

I will also mention this example with a Deferred Fetch explanation:
https://www.infoxicator.com/react-router-6-deferred-fetch

[GideonMax]

I personally think it would be much nicer if you could just specify a fallback component on the RouteObject instead of needing to use deferred + Await + Suspense, adds a lot of boilerplate to something that could be a small configuration change

[danillewin]

@brophdawg11 Hello!

I've found an issue, when navigating via SearchParams instead of PathParams, for example during the pagination:

/invoices?page=1 -> /invoices?page=2

I've described my guess at your PR and hope for your help)

Thanks in advance)

[brophdawg11]

This is expected, since by design we do not fallback on revalidations within the same route. /invoices?page=1 -> /invoices?page=2 are still the same /invoices route. In this case I would be using useNavigation to toggle your loading indicator.

[danillewin]

Ok, seems strange at first sight, thank you for your answer

[hjonasson]

Before filing my own ticket, I followed this pattern of defer in the loader + <Suspense /> and <Await />. However, I have a blank screen until all (4) loaders have resolved. One difference is that I am on React 17.0.1 which I don't have control over. Will that make a difference 😕 and upgrading to 18 will give me access to the beautiful loading pattern?

I tried using useNavigation as well in hopes that I would get state === 'loading would be true, but on my blank screen nothing is rendered so of course I don't 🤦 .

[brophdawg11]

<Suspense> is a React 18 feature so you will need to upgrade before you can leverage defer/<Await>. Until then you could fetch your slow data via fetcher.load calls.

[franklinjavier]

React 16.6 added a component that lets you “wait” for some code to load and declaratively specify a loading state

https://17.reactjs.org/docs/concurrent-mode-suspense.html

[vincerubinetti]

A little bit tangential to what others are discussing, but since this is the first google result for "react router data loader show progress"...

I can't use suspense because I'm doing an old fashioned vite SPA, and not using a "suspense-enabled data source". As such, I did a very simple and kind of dumb solution:

// global loading state (jotai)
export const loading = atom(0);

// root router layout
const Layout = () => {
  const { state } = useNavigation();
  const getLoading = useAtomValue(loading);

  return (
    <>
      <>
        <Outlet />
        {/* floating progress bar at top of screen */}
        {state === "loading" && <ProgressBar progress={getLoading} />}
      </>
    </>
  );
};

// some route data loader
async function somePageLoader() {
  getDefaultStore().set(loading, 0.1);
  await someAsyncFunc();
  getDefaultStore().set(loading, 0.2);
  await someAsyncFunc();
  // etc...
}

If anyone knows a less naive way to do this, let me know. I guess it would be cool if a LoaderFunction could be passed a progress function along with params and the like, that you could call to update a loading progress % which you could then get from useNavigation.