Improving UX During Data Fetching in Loader Functions at Route level

[sunitchoche333]

As per the UX, when I use the loader module function with async/await, the page is held without showing any loader, which can be misleading for users. Once all the APIs are resolved, the component is rendered.

Can we introduce a fallback loading page inside the loader module function to show a visual indicator while the APIs are being fetched?

My use case is that I want to fetch a few APIs before rendering the component, but I don't want to write the API fetching logic inside the component itself, as I plan to reuse the same APIs for another component. This would help avoid code duplication across components.

[brophdawg11]

You can already do that! Just return a promises from your loader and use the Await component to render fallbacks while they resolve: https://reactrouter.com/how-to/suspense