useDebouncedLoader

✨ Configurable hook to avoid flickering spinners

🎮 View Demo

Table of Contents

• 📜 About
• 🏁 Getting started
• 👨‍💻 Development
• 🙏 Acknowledgements

📜 About

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.

🏁 Getting Started

It's very simple. Just run

yarn add use-debounced-loader

or

npm install use-debounced-loader

In 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!

👨‍💻 Development

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.

🙏 Acknowledgements

Logo adapted from icon made by Freepik from www.flaticon.com.