✨ Configurable hook to avoid flickering spinners
🎮 View Demo
useDebouncedLoader is a tiny React hook designed to debounce loaders/spinners.
Using regular debounce() function (either from Lodash, many hookified versions or debounceTime() from RxJS) is a popular choice for
debouncing spinners shown when your app is awaiting some API response. However, misadjusting its delay parameter can result in suboptimal UX. For instance:
- for relatively short debounce time (say, 100..300 ms) it can still cause a little bit of flickering. That's because
debounce()propagates time on (time, when input stays high). To remedy this, you can increase debounce time, but then... - for relatively long debounce time (say, 600..800 ms) and relatively long response time, it can cause lingering. That's when spinner lingers on screen, even though request is already finished. This can turn out to be quite bad for User Experience, as your app will seem slower and less responsive.
This library aims to avoid both flickering and lingering spinners. It does so by introducing another parameter called minimalTimeOn. That's the minimal time spinner will stay on screen.
For more details, see (a very short!) API docs. You can also check out comparison with a popular useDebounce library.
It's very simple. Just run
yarn add use-debounced-loaderor
npm install use-debounced-loaderIn your app, you might have code looking roughly like this:
const { isLoading, data, ... } = useQuery(...);
if (isLoading) {
return <Spinner />
}All you need to do, is to debounce isLoading:
const { isLoading, data, ... } = useQuery(...);
const debouncedIsLoading = useDebouncedLoader(isLoading);
if (debouncedIsLoading) {
return <Spinner />
}and that's it!
Pull requests are very welcome. This projects has been bootstrapped with awesome tsdx, so getting started is very easy. All regular commands apply here as well.
Demo app uses Chakra-UI and react-timing-hooks.
Logo adapted from icon made by Freepik from www.flaticon.com.