Apollo client’s loading property from the useQuery hook switches to true as the default behavior (i.e. with notifyOnNetworkStatusChange as false) both during first load and subsequent loads/refetches.

This is often undesirable behavior. For the most common cases, we want to show a loading UI when there’s no data, but on refreshes, no loading UI (and UI re-renders with updated data, if any). A lot of discussion surrounding this is captured in a PR which I can’t quite find right now( will do later).

One good way to do this right now is to check for the presence of existing data in the condition to show the loading UI.

E.g.

const {data, loading} = useQuery(SOME_QUERY)

if(!data && loading) {
  // show loading UI
}

This way, on first load, the loading UI is shown and on refetch, the UI just updates with new value without switching.

This is also somewhat required when using the cache-and-network policy as we mostly want snappy UI updates while still refreshing and updating the data, and not showing the loading state when data is being retrieved from cache (which Apollo client does(tk.. need verify).