How can Add a Loader for the whole page in Reactjs?

Question

I want to add a Loader when any API call is happening.

My application have layout with Header, Footer, Side Menu, ContentComponent.

I want to show overlay loader on the whole page.

Tried with https://www.npmjs.com/package/react-loading-overlay

LayoutOverLay.js

import LoadingOverlay from 'react-loading-overlay'
import React, { Component }  from 'react';

 export default function MyLoader({ active, children }) {
  return (
    <LoadingOverlay
    active={active}
    spinner
    text='Please Wait...'
  >
    {children}
   </LoadingOverlay>
  )
 }

MyComponent.js

render() {
    return (<MyLoader
      active={true}
      children={<div>My content</div>}
      />)
   }

So this is applied only to my Content Component. Want to apply this to the whole page.

How can I ake to the whole page?