react-loading-provider

You Don't Have To Make It Yourself.

Getting started

yarn add react-loading-provider

Wrap the app with LoadingProvider, also provide SplashScreen and LoadingOverlay:

import {LoadingProvider} from 'react-loading-provider';

const App = () => (
  <LoadingProvider loadingWaitTime={1000} SplashScreen={SplashScreen} LoadingOverlay={LoadingOverlay}>
    <HomePage />
  </LoadingProvider>
);

Difference between SplashScreen and LoadingOverlay: SplashScreen only appears once at the start then disappear; then if we add more loading requests, LoadingOverlay will appear instead.

When you need to fire a loading request, follow this guide:

import {LoadingContext} from 'react-loading-provider';

const HomePage = () => {
  const {addLoading, removeLoading} = useContext(LoadingContext);

  const handleAJAX = () => {
    const id = addLoading();

    setTimeout(() => removeLoading(id), 5000);
  };

  return <button onClick={handleAJAX}>AJAX</button>;
};

Any loading request that is fired while the SplashScreen is visible will keep that screen being visible. The default wait time is 500ms. This is to make sure every init loading request is counted and the SplashScreen will be able to wait for them all.

After the SplashScreen disappeared, other loading requests will trigger LoadingOverlay only. The mechanism is the same.