---
title: "Loading Overlay"
description: "Overlay indicating content is loading"
source: "Equality"
---
import { LoadingOverlayDemo } from "@demo/components/demo/loading-overlay";

## Overview

Loading Overlay covers the interface with a dimmed backdrop and a centered [Spinner](/components/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](/components/skeleton) instead.

## Usage

Import the component:

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

Toggle it with state around an async action:

```tsx
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.

<LoadingOverlayDemo client:only="react" />

## Custom Message

The `message` prop replaces the default "Loading..." text.

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

## Props

| Name        | Description                                                      | Type      | Default        | Required |
| ----------- | ---------------------------------------------------------------- | --------- | -------------- | -------- |
| `isVisible` | Whether the overlay is shown. When `false`, nothing is rendered. | `boolean` | —              | ✅       |
| `message`   | Text displayed beneath the spinner.                              | `string`  | `"Loading..."` | ❌       |