Skip to main content

Loading State

loadingState configures the built-in loading UI for the content zone. Activate it by setting status: 'loading' on ContentConfig.

Three display patterns are available — spinner, skeleton, and text — plus a full custom renderer override.

How it works​

Set status: 'loading' to activate. Widgemo renders the loading UI instead of data content. Set loadingState.enabled: false to suppress the built-in loading UI while keeping status: 'loading' (useful when you render loading UI outside Widgemo).

zones: {
  content: {
    status: 'loading',
    loadingState: {
      indicator: 'spinner',       // 'spinner' | 'skeleton' | 'text'
      message: 'Fetching data…',  // string or (data) => string
    },
    mode: 'table',
    item: { fields: […], layout: { type: 'auto' } },
  },
},

Spinner (default)​

Default spinner indicator with a custom message.

Team Directory
Fetching team data…
content: {
  status: 'loading',
  loadingState: { indicator: 'spinner', message: 'Fetching team data…' },
  mode: 'table',
  item: { … },
},

Skeleton — text bars​

Skeleton with 'text-bars' variant and shimmer animation (default).

Team Directory
Loading...

Skeleton — table cells​

Skeleton with 'table-cells' variant — gives a mode-representative placeholder for table content.

Team Directory
Loading...

Skeleton — cards grid​

Skeleton with 'cards-grid' variant — representative placeholder for grid/card layouts.

Team Directory
Loading...

Skeleton — pie chart​

Skeleton with 'pie-chart' variant — representative placeholder for chart content.

Team Directory
Loading...

Text indicator​

'text' indicator — minimal; renders the message string in muted text only.

Team Directory
LoadingLoading…

loadingState options​

OptionTypeDefaultEffect
enabledbooleantrueSet to false to suppress built-in loading UI while keeping status: 'loading'.
indicator'spinner' | 'skeleton' | 'text''spinner'Built-in loading indicator style.
skeleton.variant'text-bars' | 'table-cells' | 'cards-grid' | 'pie-chart''text-bars'Skeleton layout shape. Choose the one that matches your content mode.
skeleton.animation'shimmer' | 'morph' | 'none''shimmer'Skeleton animation style.
skeleton.gifUrlstringunsetReplace the built-in skeleton with a custom GIF.
messagestring | (data) => string'Loading...'Text shown below the indicator. Accepts a function for dynamic messages.
renderer(props) => ReactNodeunsetFull custom loading UI. When provided, overrides all built-in indicator rendering.

Custom renderer​

When renderer is provided it takes full control of the loading UI — built-in indicator rendering is bypassed entirely.

renderer: (props: {
  message?:   string;
  indicator?: 'spinner' | 'skeleton' | 'text';
  skeleton?:  { variant?, animation?, gifUrl? };
  data?:      Entity[];
}) => ReactNode

See Also​