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
2 Likes
3

Has this been removed from npm?
can't find it

4

Thank you for pointing this out. Not sure what is happening, when I tried to republish the last version I get this error:

npm error code E400
npm error 400 Bad Request - PUT https://registry.npmjs.org/@benpley%2Fwappler-data-status - Cannot publish over previously published version "1.0.1".
npm error A complete log of this run can be found in: C:\Users\ben\AppData\Local\npm-cache_logs\2026-09-09T23_16_01_934Z-debug-0.log

Decided to publish version 1.0.2

Edit: Come to think of it, there may be an error or a required improvement to the extension, been too preoccupied to have a look, will do so over the coming days. If you experience a problem or have features that need adding, please let me know. Much appreciated for your input.

5

Seems to work really well. Great to be able to show a spinner when data is loading so easily.
Only think that comes to mind is the ability to disable the "empty state" message so a custom one can be used in its place

1 Like
6

Will work on it, feedback appreciated.

1 Like