Loading Overlay

Overview

Loading Overlay covers the interface with a dimmed backdrop and a centered Spinner and message, signalling that a blocking operation is in progress. Use it for situations where interacting with the underlying content should be entirely prevented until it completes. Try to avoid putting users in these situations where possible!

Its visibility is fully controlled through the isVisible prop: when false, the component renders nothing. For skeleton-style, non-blocking loading of individual elements, use Skeleton instead.

Usage

Import the component:

import { LoadingOverlay } from "@eqtylab/equality";

Toggle it with state around an async action:

const [isVisible, setIsVisible] = useState(false);

const handleSave = async () => {
  setIsVisible(true);
  await save();
  setIsVisible(false);
};

<LoadingOverlay isVisible={isVisible} message="Saving changes..." />;

Default

Click the button to show the overlay for a few seconds.

Custom Message

The message prop replaces the default “Loading…” text.

<LoadingOverlay isVisible message="Generating report..." />

Props