Loading State

Install: npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/loading-state.json

When to use

Use while an agent is waiting for a request, file or generation result.

Key props and data

Interaction and state checks

Render the component only while your own loading state is true. Test the four visual variants and reduced motion; do not use its animation as proof a request is running.

Integration boundaries

No progress, cancellation or request API is supplied. Surfer media requires a valid source and may fail on a restricted network.

The runnable usage and source reference below preserve the native API. These practical guides do not claim a full translation of upstream prose.

Runnable usage

Install a complete example below first, then import its installed entry. Parameterized example source, shared helpers, native components and CSS are included; no manual relative-import edits are required.

import Demo from '@/components/beautiful-ui/examples/presets/loading-state-custom-label';
import '@/styles/beautiful-ui.css';
export default function Example() { return <Demo />; }

Preview states

Drive, Dots, Orbit, Surfer, Custom label

Demo state and mock data do not provide a backend service. Inspect the component props before wiring real data.

Pixel-grid loader with shimmer and elapsed time.

Complete example installation

These are runnable native states and parameterized usage scenarios, not additional components. Each bundle includes its source closure, helpers, pinned dependencies, independent CSS and licenses. Scenario names are not new native component props; consult the source API below.

Drive

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/loading-state/loading-state-drive.json

Default import: @/components/beautiful-ui/examples/presets/loading-state-drive

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Dots

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/loading-state/loading-state-dots.json

Default import: @/components/beautiful-ui/examples/presets/loading-state-dots

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Orbit

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/loading-state/loading-state-orbit.json

Default import: @/components/beautiful-ui/examples/presets/loading-state-orbit

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Surfer

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/loading-state/loading-state-surfer.json

Default import: @/components/beautiful-ui/examples/presets/loading-state-surfer

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Custom label

npx shadcn@latest add https://jiguang132.com/r/beautiful-ui/examples/loading-state/loading-state-custom-label.json

Default import: @/components/beautiful-ui/examples/presets/loading-state-custom-label

Dependencies: clsx@2.1.1, tailwind-merge@3.6.0, shadow-plugin@2.1.1

Initialize Tailwind CSS v4, import beautiful-ui.css once and synchronize theme with the host html dark class. Examples read html lang for Chinese/English and do not supply backend, authentication or recording. Network/clipboard availability still depends on the browser.

Source-backed parameter reference

Implementation signatures and types are generated from the pinned local source. Optional props, native inherited types, union branches and never exclusions are preserved. A forwardRef implementation's ref is a React reference, not an additional business prop.

LoadingState({
  label,
  variant = "Drive",
  /** the meme feed for the Surfer variant; hosted on Vercel Blob so it plays in
   *  production (the local /public/subway-surfers.mp4 stays gitignored).
   *  Heavily compressed (288px, 20fps, no audio → ~265 KB, from 1.1 MB) to keep
   *  Blob data transfer down. */
  videoSrc = "",
}: {
  label?: string;
  variant?: string;
  videoSrc?: string;
})

Destructuring defaults in source

Only defaults written directly in parameter/props destructuring are listed. Conditional expressions, runtime theme and computed values require source inspection; this is not an exhaustive behavior-default list.

// LoadingState
variant = "Drive"

// LoadingState
videoSrc = ""