Complex Loader Management for React.
Read the Medium post "Managing Complex Waiting Experiences on Web UIs".
react-wait is a React Hook helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages a Arrayg
with multiple loading states. The built-in loader component listens its registered loader and immediately become loading state.
React.Suspense
?:
Why not React has its own Suspense feature to manage all the async works. For now it only supports code-splitting (not data-fetching).
useWait
allows you to manage waiting experiences much more explicitly and not only for Promised/async patterns but also complete loading management.
Overview
Here's a quick overview that what's useWait
for:
import useWait Waiter from "react-wait"; { const isWaiting = ; return <div> ? "Creating User..." : "Nothing happens" </div> ;} { const anyWaiting = ; return <div> ? "Something happening on app..." : "Nothing happens" </div> ;} { const startWaiting endWaiting isWaiting = ; { ; // Faking the async work: ; } return <button = => <Wait ="creating user" => Create User </Wait> </button> ;} ReactDOM;
Quick Start
If you are a try and learn developer, you can start trying the react-wait now using codesandbox.io.
1. Install:
yarn add react-wait
2. Require:
import Waiter useWait from "react-wait"; { const startWaiting endWaiting isWaiting Wait = ; return <button = = > <Wait ="creating user" => Create User </Wait> </button> ;}
Waiter
Context Provider
3. Wrap with the And you should wrap your App
with Waiter
component. It's actually a Context.Provider
that provides a loading context to the component tree.
const rootElement = document;ReactDOM;
Installation
$ yarn add react-wait# or if you using npm $ npm install react-wait
The API
react-wait provides some helpers to you to use in your templates.
anyWaiting()
Returns boolean value if any loader exists in context.
const anyWaiting = ; return <button =>Disabled while waiting</button>;
isWaiting(waiter String)
Returns boolean value if given loader exists in context.
const isWaiting = ; return <button => Disabled while creating user </button>;
startWaiting(waiter String)
Starts the given waiter.
const startWaiting = ; return <button =>Start</button>;
endWaiting(waiter String)
Stops the given waiter.
const end = ; return <button =>Stop</button>;
Wait
Component
Using { const Wait = ; return <Wait ="the waiting message" => The content after waiting done </Wait> ;}
Better example for a button
with loading state:
<button => <Wait ="creating user" => Create User </Wait></button>
Making Reusable Loader Components
With reusable loader components, you will be able to use custom loader components as example below. This will allow you to create better user loading experience.
{ return <img ="spinner.gif" />;}
Now you can use your spinner everywhere using waiting
attribute:
<button => <Wait ="creating user" => Create User </Wait></button>
createWaitingContext(context String)
Creating Waiting Contexts using To keep your code DRY you can create a Waiting Context
using createWaitingContext
.
{ const createWaitingContext = ; // All methods will be curried with "creating user" on. const startWaiting endWaiting isWaiting Wait = ; { ; ; } return <Button = => <Wait ="Creating User...">Create User</Wait> </Button> ;}
Contributors
- Fatih Kadir Akın, (creator)
Other Implementations
Since react-wait based on a very simple idea, it can be implemented on other frameworks.
- vue-wait: Multiple Process Loader Management for Vue.
- dom-wait: Multiple Process Loader Management for vanilla JavaScript.
License
MIT © Fatih Kadir Akın