Tracking promises or how to avoid showing infinite loading indicators. Reactjs + hooks.

1. September 2019
Tracking promises
No more Infinite Loading Indicators
Braulio Díez

2. Thanks to our sponsors!

3. I need to display a loading indicator …
onClick = () => {
/*
Begin by setting loading = true, and use the
callback function of setState() to make the
ajax request. Set loading = false after the
request completes.
*/
this.setState({ loading: true }, () => {
Axios.get('/endpoint’)
.then(result => this.setState({
data: [...result.data]
}));
});
}
CRAP !
loading: false,

4. There is more …
I need to keep track of several async requests running in paralell
Under some scenarios HTTP calls have to display a loading indicator or execute silently
I need to fire async calls: in my components, in redux, in my javascript code…
I don’t want a solution tied up to axios, fetch…
I don’t want to have a flickering loading indicator on high speed connections
I want to differentiate and lock only certain areas of the screen

5. React-promise-tracker
Microlibrary
Keeps track of how many promises are in progress
Implementes a Hook to get current progress status
Demo Time

6. github.com/lemoncode/react-promise-tracker
@basefactorteam github.com/lemoncode/react-promise-tracker-workshop
basefactor.com