Delayed loading state

[pke]

A common UX is to not show loading state too early but instead after a short pause.
That's done so the screen does not re-layout for what only takes a moment sometimes a blink of an eye.
The first loading display is usually shown after 500ms and can get gradually more descriptive and desperate.

One possible implementation I could come up with to keep it nicely in a hook is this:

function useLoading(loading, delay = 500) {
  const [isLoading, setIsLoading] = useState(loading)
  
  useEffect(() => {
    return setTimeout(() => setIsLoading(true), delay)
  }, [loading]

  return isLoading
}

and this could then be re-used inside other hooks:

function useOrder() {
  const { data: order, error, loading } = useSWR("/order", get)
  const loading = useLoading(!order && !error, 500)

  return {
    order,
    loading,
    error,
  }
}

Does this make sense?

[sergiodxa]

That makes sense, I usually use React.Suspense to handle it the loading and try to prefetch the data as soon as possible to reduce the loading time, and using Suspense in the future with Concurrent Mode you will be able to use useTransition to define this delay while fetching data.

[pke]

I know about Suspense, but is it ready yet? ;)
So I will go with this solution for now.

[sergiodxa]

Concurrent Mode is not ready, Suspense it is (you can use it with React.lazy for lazy loading), and SWR abstract you away the interaction with Suspense, I have been using it in prod for almost a year with SWR

[semoal]

@shuding now that isLoading it's something internally of SWR itself, it could be a good addition for UX to add this to swr config global. Like:

<SWRConfig value={{  delayedLoading: 500 }}>
  <Component/>
</SWRConfig>

Would be a super interesting addition 👍

[shuding]

@semoal Maybe it's better to delegate that to another custom hook (like useDebouncedValue(isLoading, 500)). Because SWR needs to handle things like deduplication and race conditions, and this makes internal state harder to implement at the moment.

[semoal]

Ah alright, makes sense! Thanks for the quick response