loading vs refreshing

[pke]

What is the recommended way to treat initial loading of data and fetching date causes by a user initiated refresh?
I have seen many examples where loading: !data && !error which only sets it true on the very first call to useSWR with that cache key.

Refreshing is usually done via mutate() and this would trigger isValidating to switch to true while the fetcher is executed.

So lets say I have screen that when its first rendered shows "loading items" based on loading prop. However once it has data (meaning data != undefined, but can be empty array or null) and the user clicks a refresh button / pulls down to refresh then the existing items should not be switched out with a loading text but instead a refresh spinner should be visible indicating the current items might be stale.

So we really need 2 states here:
loading - when nothing is in the cache
refreshing - when the cache has data/or error but mutate triggered a re-fetch (´isValidating`)

What is common practice here?