revalidateOnMount With Fallback triggers isLoading instead of isValidating

[anaclumos]

Bug report

Description / Observed Behavior

What kind of issues did you encounter with SWR?

I have Next App Router Server Fetch to cache the initial response and then use SWR to have live-updates. I pass the initial server fetch as fallback data to simplify the code.

When a user interacts and changes the entire behavior, there are places I need to set isLoading to show that the user's interaction triggered a loading (imagine "jump to page 30 of the table"). So I have like isLoading ? <Skeleton /> : <Content />.

However, even when SWR has fallback data, it first triggers isLoading.

Expected Behavior

How did you expect SWR to behave here?

It should trigger isValidating instead of isLoading, since the initial data has been provided.

---

Or to be more specific about my request, I'd like to know how Prerendering (or Server-side caching) with SWR should work on App Router.

I want first to show the server fetch-cached data, then silently revalidate and update on the client side if anything is different. Meanwhile, passing as a fallback like TanStack Query triggers isLoading to be true, showing the skeleton.

You might ask, "Why set isLoading at all when the server fallback data would always be present?" that's because when a user types something on the search box with instant search, say /?q=somesearchquery, this should only be done with some search param useState with useSWR. However, in this scenario, since there is no isLoading, the user would see some stale data (or wrong data) then see the result. Thus, I want to use isLoading in this case.

[anaclumos]

Or to be more specific about my request, I'd like to know how Prerendering (or Server-side caching) with SWR should work on App Router.

I want first to show the server fetch-cached data, then silently revalidate and update on the client side if anything is different. Meanwhile, passing as a fallback like TanStack Query triggers isLoading to be true, showing the skeleton.

You might ask, "Why set isLoading at all when the server fallback data would always be present?" that's because when a user types something on the search box with instant search, say /?q=somesearchquery, this should only be done with some search param useState with useSWR. However, in this scenario, since there is no isLoading, the user would see some stale data (or wrong data) then see the result. Thus, I want to use isLoading in this case.

[anaclumos]

Setting const [initialRevalidationSuccess, setInitialRevalidationSuccess] = useState(false);, set the value to true at the fetcher, and renaming the return value to isLoading: isLoading && initialRevalidationSuccess temporarily fixes the issue.