Global loading indicator

[testerez]

Hello, I'd like to show a loading indicator whenever any swr request is in progress.

I came up with this solution:

const getIsSwrLoading = () => cache.keys().some(k => k.startsWith('validating@') && cache.get(k));

function useIsSwrLoading() {
  const [isLoading, setIsLoading] = useState(getIsSwrLoading());
  const update = () => setIsLoading(getIsSwrLoading());
  useEffect(() => cache.subscribe(update), []);
  return isLoading;
}

I have some questions about it:

• Does this approach look correct? Relying on undocumented cache keys sounds fragile.
• Would it make sense to have such a hook built in swr lib?
• Is cache documented anywhere

[testerez]

Actually, I just realized react-query has a very similar built-in hook: useIsFetching

I like the drier API of swr, but I think this would be a useful addition.

[vikyw89]

any update on this ?

Having a global loading and or revalidating seems super useful and efficient

[NicoGrapsas]

same here, i think having useIsFecthing would be useful

[testerez]

I realize unmounted useSWR hooks can remain in validating state forever. So my solution is not actually suitable...

[iShawnWang]

I am also looking forward to this feature, in my opinion, it would be better to have a FSM, indicate : [initial, loading, error] state ~

[shuding]

It's a bit tricky to do this in the "React way", and some extra logic (reference counting) needs to be added to each SWR hook so it might bring some unneeded overhead for users that don't need it.

I'll think about a better way, Middleware is probably doable.

[pke]

Since middleware are now possible in swr do you think it could be implemented with it?
To have a global "loading" bar/indicator would be nice to have in some apps.

[iShawnWang]

@pke since there is no official impl for now, we could try it ourself like this

SAMPLE ONLY

export default React.memo(() => {
  const [requestCount, setRequestCount] = useState(0);

  function requestCounter(useSWRNext) {
    return (key, fetcher, config) => {
      const extendedFetcher = (...args) => {
        setRequestCount((prev) => prev + 1);
        return fetcher(...args).finally(() =>
          setRequestCount((prev) => prev - 1)
        );
      };

      return useSWRNext(key, extendedFetcher, config);
    };
  }

  return (
    <SWRConfig value={{ use: [requestCounter] }}>
      <App />
      <Loading loading={requestCount > 0} />
    </SWRConfig>
  );
})

[pke]

Nice, thanks for the input! I have some fetchers that do not run network request but are like for async settings fetching or geolocation tracking. To not count them I guess I would have to put something in the key to hide them and detect them here in the middleware?

Maybe create a useUntrackedSwr with identical signature as useSwr that annotates the key (array) with a "hidden" string item.

[vikyw89]

i got this error, fetcher(...).finally is not a function

[vikyw89]

solved, it was caused by having a useSWR with undefined value as fetcher