You can use classic loading overlay box over your content when some flag (i.e. loading) is true.

Other way to do it is to use pointer-event: none in CSS. Use same flag to set class to your content block.

Here is a working example in codesanbox:
https://codesandbox.io/s/determined-dirac-fj0lv?file=/src/App.js

Here is code:

export default function App() {

  const [loadingState, setLoadingState] = useState(false);

  const [pointerEvent, setPointerEvent] = useState(false);



  return (

    <div className="App">

      <div className="sidebar">Sidebar</div>

      <div

        className={classnames("content", {

          "content-pointer-event-none": pointerEvent

        })}

      >

        <button onClick={() => setLoadingState(true)}>

          Show loading overlay

        </button>

        <button onClick={() => setPointerEvent(true)}>

          Set pointer event in css

        </button>



        {loadingState && <div className="loading-overlay"></div>}

      </div>

    </div>

  );

}

.App {

  font-family: sans-serif;

  text-align: center;

  display: flex;

  position: absolute;

  width: 100%;

  height: 100%;

}



.content {

  flex: 1;

  position: relative;

}



.loading-overlay {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.4);

  z-index: 1;

}



.content-pointer-event-none {

  pointer-events: none;

}