SutraUI.LoadingState (Sutra UI v0.2.0)

View Source

A reusable loading state component for displaying loading indicators.

Provides a centered loading state with spinner and optional message, commonly used in LiveViews while data is being fetched.

Examples

# Basic loading state
<.loading_state />

# Loading with custom message
<.loading_state message="Loading batch data..." />

# Loading without card wrapper (just spinner)
<.loading_state wrap_card={false} />

# With custom spinner size
<.loading_state spinner_size="xl" message="Processing..." />

# Inline loading (smaller, no card)
<.loading_state wrap_card={false} spinner_size="sm" message="Saving..." />

Summary

Functions

loading_state(assigns)

Renders a loading state with spinner and message.

Functions

loading_state(assigns)

Renders a loading state with spinner and message.

Attributes

  • message - Loading message text. Defaults to "Loading...".
  • wrap_card - Whether to wrap in a card component. Defaults to true.
  • spinner_size - Size of the spinner: sm, default, lg, xl. Defaults to "lg".
  • class - Additional CSS classes.

Attributes

  • message (:string) - Loading message text. Defaults to "Loading...".
  • wrap_card (:boolean) - Whether to wrap in a card. Defaults to true.
  • spinner_size (:string) - Size of the spinner. Defaults to "lg". Must be one of "sm", "default", "lg", or "xl".
  • class (:any) - Additional CSS classes. Defaults to nil.