A reusable data loading spinner + empty state card

Wappler Extensions
1

Needed for my own project, I thought it would be useful to others:

@benpley/wappler-data-status - npm

A reusable data loading spinner + empty state card component for Wappler App Connect pages.

Add the Data Status component to any page via Wappler's visual UI, configure the data source and loading state through the Properties panel, and the widget will show a Bootstrap spinner while your Server Connect action is loading, then switch to a friendly empty-state card when there are no records to display.

Features

  • :counterclockwise_arrows_button: Loading spinner — shown while loading-state is truthy
  • :open_mailbox_with_lowered_flag: Empty state card — shown when the data array is empty (and not loading)
  • :pencil: Fully customisable — title, message, and Font Awesome icon are all configurable
  • :control_knobs: Wappler-native — registers as a proper App Connect component with a visual property panel
  • :high_voltage: Zero dependencies — built on standard Web Components + Wappler's dmx.Component API
1 Like