Single loader for multiple components with HTTP requests

Question

I created an LastUsers component and a LastPosts component. These components are reusable and have HTTP requests with API.

I have a page with these two components :

...
import LastUsers from './Module/LastUsers'
import LastPosts from './Module/LastPosts'

export default class Homepage extends Component {
    render() {
        return (
            <View>
                ...
                <LastUsers />
                <LastPosts />
                ...
            </View>
        )
    }
}

How to manage a common loader for these two (or more) components ?

I know handle a loader for a single component with ActivityIndicator and state :

...
constructor(props) {
    super(props)
    this.state = {
        ...
        isLoading: true,
    }
}

componentDidMount() {
    getQuery().then(data => {
        this.setState({
            ...
            isLoading: false,
        })
    })
}
...

But not a single loader for multiple components with HTTP requests

Answer 1

inside components add this props :

for example inside LastUsers :

class LastUsers extends component {
 _req = ()=>{
   this.props.onStart();
   axios.get('http://...').then((res)=>{
      if(res.data === success){
         this.props.onSuccess()
      }
   })
 }
}


export default class Homepage extends Component {

_check = ()=>{
  if(this.state.lastUsers && this.state.lastPosts){
    loader : false
  }
}
render() {
    return (
        <View>
            ...
            <LastUsers onStart={()=>{this.setState(loader : true)}} onSuccess={()=>{
              this.setState({lastUsers : true})
              this._check()
            }/>
            <LastPosts onStart={()=>{this.setState(loader : true)}} onSuccess={()=>{
              this.setState({lastPosts: true})
              this._check()
            }/>
            ...
        </View>
    )
}


}