CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
shalu j
shalu j

Reputation: 347

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

I have a screen image

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?

Upvotes: 2

Views: 9491

Answers (2)

Mario Petrovic
Mario Petrovic

Reputation: 8352

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

Upvotes: 0

Terminat
Terminat

Reputation: 1237

Yes sure, you can add a class with css pointer-events rule. Set it on the whole table and it will disable all events. Just add it when request starts and remove it when it ends. You can achieve that, by having a boolean variable isLoading in your state, or redux store and based on that add or remove the no-click class.

.no-click {
  pointer-events: none;
}

Upvotes: 6

Related Questions