react-loading-provider
v1.0.2
Published
You Don't Have To Make It Yourself.
Downloads
4
Maintainers
Readme
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.