LoadingOverlay

Stable

Covers a region or the whole screen with a spinner while work is in progress.

LoadingOverlay keeps layout stable while content refreshes, and prevents interaction with stale data. The covered content is marked aria-busy and made inert so it cannot be clicked or focused. Prefer Skeleton for first loads and a Button’s loading state for single actions; use the overlay when a whole panel is temporarily unusable.

Source Edit docs Report an issue

Overview

Seat usage48 of 50 seats used

Refreshing usage…

tsx

import * as React from 'react';
import { Button, LoadingOverlay } from '@bindshq/stance-react';

const panel: React.CSSProperties = {
  display: 'grid',
  gap: 8,
  width: 320,
  padding: 20,
  border: '1px solid var(--st-color-border-default)',
  borderRadius: 12,
  background: 'var(--st-color-bg-surface)',
};

export function Basic() {
  const [busy, setBusy] = React.useState(true);
  return (
    <div style={{ display: 'grid', gap: 12, justifyItems: 'center' }}>
      <LoadingOverlay visible={busy} message="Refreshing usage…" style={{ borderRadius: 12 }}>
        <div style={panel}>
          <strong>Seat usage</strong>
          <span>48 of 50 seats used</span>
          <Button size="sm" variant="outline">
            Manage seats
          </Button>
        </div>
      </LoadingOverlay>
      <Button size="sm" variant="secondary" onClick={() => setBusy((b) => !b)}>
        {busy ? 'Finish loading' : 'Start loading'}
      </Button>
    </div>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Seat usage48 of 50 seats used

Refreshing usage…

Light

Seat usage48 of 50 seats used

Refreshing usage…

Dark

Seat usage48 of 50 seats used

Refreshing usage…

High contrast

Import

tsx

import { LoadingOverlay } from '@bindshq/stance-react';

Platforms

LoadingOverlay has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { LoadingOverlay } from '@bindshq/stance-react';

Examples

Solid backdrop

Hide content entirely when partial data would mislead.

Deployment report128 mailboxes

Loading report…

tsx

import * as React from 'react';
import { LoadingOverlay } from '@bindshq/stance-react';

const panel: React.CSSProperties = {
  display: 'grid',
  gap: 8,
  width: 320,
  padding: 20,
  border: '1px solid var(--st-color-border-default)',
  borderRadius: 12,
  background: 'var(--st-color-bg-surface)',
};

export function Solid() {
  return (
    <LoadingOverlay visible backdrop="solid" message="Loading report…" style={{ borderRadius: 12 }}>
      <div style={panel}>
        <strong>Deployment report</strong>
        <span>128 mailboxes</span>
      </div>
    </LoadingOverlay>
  );
}

Full screen

For app-wide transitions such as switching organisation.

tsx

import * as React from 'react';
import { Button, LoadingOverlay } from '@bindshq/stance-react';

export function FullScreen() {
  const [busy, setBusy] = React.useState(false);
  return (
    <>
      <Button
        onClick={() => {
          setBusy(true);
          setTimeout(() => setBusy(false), 1500);
        }}
      >
        Switch organisation
      </Button>
      <LoadingOverlay visible={busy} fullScreen message="Switching to Binds Ltd…" />
    </>
  );
}

API reference

Prop	Type	Default	Description
`visible`* required	`boolean`	None	Show the overlay.
`message`	`ReactNode`	`'Loading…'`	Shown under the spinner and announced politely.
`backdrop`	`'subtle' \| 'solid'`	`'subtle'`	Subtle keeps content faintly visible.
`fullScreen`	`boolean`	`false`	Cover the viewport (rendered in a portal).
`children`	`ReactNode`	None	Content to cover; made inert and aria-busy while visible.

Accessibility

The wrapper has aria-busy="true" while visible and the content is inert (not focusable or clickable).
The message is in a role="status" region so screen readers hear it once.
The spinner slows instead of stopping under prefers-reduced-motion.

Usage guidelines

Do

Write a specific message: “Deploying signatures…”.
Return focus to a sensible place when loading finishes.

Don’t

Cover the screen for background refreshes; update in place instead.

Overview

Seat usage48 of 50 seats used

Refreshing usage…

tsx

import * as React from 'react';
import { Button, LoadingOverlay } from '@bindshq/stance-react';

const panel: React.CSSProperties = {
  display: 'grid',
  gap: 8,
  width: 320,
  padding: 20,
  border: '1px solid var(--st-color-border-default)',
  borderRadius: 12,
  background: 'var(--st-color-bg-surface)',
};

export function Basic() {
  const [busy, setBusy] = React.useState(true);
  return (
    <div style={{ display: 'grid', gap: 12, justifyItems: 'center' }}>
      <LoadingOverlay visible={busy} message="Refreshing usage…" style={{ borderRadius: 12 }}>
        <div style={panel}>
          <strong>Seat usage</strong>
          <span>48 of 50 seats used</span>
          <Button size="sm" variant="outline">
            Manage seats
          </Button>
        </div>
      </LoadingOverlay>
      <Button size="sm" variant="secondary" onClick={() => setBusy((b) => !b)}>
        {busy ? 'Finish loading' : 'Start loading'}
      </Button>
    </div>
  );
}

Light, dark and high contrast

Every Stance component is designed and tested in all three appearance modes.

Seat usage48 of 50 seats used

Refreshing usage…

Light

Seat usage48 of 50 seats used

Refreshing usage…

Dark

Seat usage48 of 50 seats used

Refreshing usage…

High contrast

Platforms

LoadingOverlay has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.

tsx

import { LoadingOverlay } from '@bindshq/stance-react';

Examples

Solid backdrop

Hide content entirely when partial data would mislead.

Deployment report128 mailboxes

Loading report…

tsx

import * as React from 'react';
import { LoadingOverlay } from '@bindshq/stance-react';

const panel: React.CSSProperties = {
  display: 'grid',
  gap: 8,
  width: 320,
  padding: 20,
  border: '1px solid var(--st-color-border-default)',
  borderRadius: 12,
  background: 'var(--st-color-bg-surface)',
};

export function Solid() {
  return (
    <LoadingOverlay visible backdrop="solid" message="Loading report…" style={{ borderRadius: 12 }}>
      <div style={panel}>
        <strong>Deployment report</strong>
        <span>128 mailboxes</span>
      </div>
    </LoadingOverlay>
  );
}

Full screen

For app-wide transitions such as switching organisation.

tsx

import * as React from 'react';
import { Button, LoadingOverlay } from '@bindshq/stance-react';

export function FullScreen() {
  const [busy, setBusy] = React.useState(false);
  return (
    <>
      <Button
        onClick={() => {
          setBusy(true);
          setTimeout(() => setBusy(false), 1500);
        }}
      >
        Switch organisation
      </Button>
      <LoadingOverlay visible={busy} fullScreen message="Switching to Binds Ltd…" />
    </>
  );
}

API reference

Prop	Type	Default	Description
`visible`* required	`boolean`	None	Show the overlay.
`message`	`ReactNode`	`'Loading…'`	Shown under the spinner and announced politely.
`backdrop`	`'subtle' \| 'solid'`	`'subtle'`	Subtle keeps content faintly visible.
`fullScreen`	`boolean`	`false`	Cover the viewport (rendered in a portal).
`children`	`ReactNode`	None	Content to cover; made inert and aria-busy while visible.

Overview

Light, dark and high contrast

Import

Platforms

Examples

Solid backdrop

Full screen

API reference

Accessibility

Usage guidelines

Do

Don’t

Related

Overview

Light, dark and high contrast

Import

Platforms

Examples

Solid backdrop

Full screen

API reference

Accessibility

Usage guidelines

Do

Don’t

Related