如何在Reactjs中为整个页面添加加载程序？

如何解决如何在Reactjs中为整个页面添加加载程序？

我想在发生任何API调用时添加一个Loader。

我的应用程序具有页眉，页脚，侧边菜单，ContentComponent的布局。

我想在整个页面上显示叠加层加载器。

尝试过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>}
      />)
   }

因此，这仅适用于我的内容组件。希望将其应用于整个页面。

如何浏览整个页面？