LoadingOverlay

v1.0.0

Overlay loading state for blocking long-running UI actions.

Import

import { LoadingOverlay } from '@meteorack/sdk-react';

How To Use It

Use it when a mutation blocks meaningful interaction with the current region until the server responds.
Prefer local overlays over global page blockers when only one panel or dialog is waiting on work.

Works Well With

Button Card Table

Props

visible: boolean

Controls whether the overlay is rendered.

label?: string

Accessible status text shown under the spinner.

Example

LoadingOverlay.tsx

import { useState } from 'react';
import { Card, Button, LoadingOverlay } from '@meteorack/sdk-react';

export function SavingPanel() {
  const [saving, setSaving] = useState(false);

  return (
    <div style={{ position: 'relative', minHeight: '180px' }}>
      <Card>
        <Button variant="primary" onClick={() => setSaving(true)}>
          Save settings
        </Button>
      </Card>

      <LoadingOverlay visible={saving} label="Saving settings…" />
    </div>
  );
}

PreviousConfirmDialog NextAdminShell