Loading

A centred spinner with a label.

The loading state for a whole panel. It carries role="status" and aria-live="polite", so screen readers announce it too. One of the three state components Vantage adds on top of shadcn/ui, alongside Empty and ErrorState.

export const client = "only";

import { Loading } from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <div className="w-96 rounded-xl border">
      <Loading label="集計しています…" className="min-h-48" />
    </div>
  );
}

import { Loading } from "@squadbase/vantage/ui";

To hold the layout while waiting use Skeleton; in tight spots such as a button, Spinner.