Fallback component and ssr: "data-only"
Is there a way to show the fallback component of a route while the route's loader/beforeLoad is loading the data?
This is what I want to achieve:
- Let's say I have a
/books route and in this router's loader function I'm doing a fetch call to get some books which takes 5 seconds.
- While the data is being loaded, I want to show a spinner without waiting for the data to be available.
- Once the data loads, we show the route's component.
The current behavior:
- The loader takes 5 seconds to resolve.
- Then, the spinner is displayed for the minPendingMs.
- Then, we show the route's component.1 Reply
genetic-orange•3mo ago
Have you tried the route pendingComponent?
You can also no await or return the fetch in the loader. You can just use fetchQuery inside of it, then wrap the component with the useSuspendeQuery with a Suspense. That way you can use the Suspense fallback.