The document discusses react-promise-tracker, a micro library that keeps track of promises to prevent infinite loading indicators. It allows setting a loading state when promises are in progress and resetting it when complete. This helps manage loading states across async calls in components, Redux, and JavaScript code without being tied to a specific library like Axios or Fetch. It also aims to prevent flickering indicators on fast connections and allow locking only certain screen areas being updated.

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