javascript - How to disable click events when execution is going on in React?

Question

I have a screen

where I want to disable all the events when execution is going on.

When I click on the Execute button, an API is called which probably takes 4-5 minutes to respond. During that time, I don't want the user to click on the calendar cells or Month navigation arrows. In short, I want to disable all the events on the center screen but not the left menu.

Is it possible to do that?

Answer 1

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;
}