wappler-data-status

Version 1.0.2

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

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

Requirements

This is a client-side only component — it runs entirely in the browser and is compatible with any Wappler backend (Node.js, PHP, ASP.NET, etc.).

| Dependency | Version | |---|---| | Wappler | ≥ 4.0.0 | | Bootstrap | 5.x | | Font Awesome | 5.x / 6.x (for icons) |

Note: Node.js is only needed if you install via npm. It is not a runtime requirement.

Installation

Install this extension directly from within Wappler using the Project Options > Extensions panel:

1. Open your project in Wappler.
2. Go to Project Options (the gear icon in the top toolbar).
3. Select the Extensions tab.
4. In the search box, type wappler-data-status or @benpley/wappler-data-status.
5. Locate Data Status in the results and click Add.
6. Wappler will install the extension and automatically copy the required files to your project.

Note: The extension is installed per-project. Make sure your project is open before installing.

Usage

Basic HTML

<data-status
  id="myStatus"
  data-source="sc_items.data.items"
  loading-state="sc_items.state.executing"
  dmx-bind:empty="sc_items.data.items.isEmpty()"
  dmx-bind:loading="sc_items.state.executing"
  empty-title="No Items Found"
  empty-message="Get started by adding your first item. Click the &quot;Add&quot; button to create a new record."
  empty-icon="fas fa-folder-open">
</data-status>

In Wappler (visual editor)

1. Drag Data Status from the Layout component group onto your page.
2. In the Properties panel set:
   • Data Source — the App Connect array expression (e.g. sc_clients.data.clients)
   • Loading State — the boolean executing expression (e.g. sc_clients.state.executing)
   • Title / Message / Icon — your empty-state copy and a Font Awesome icon class

The component automatically writes the required dmx-bind:empty and dmx-bind:loading attributes for you.

Attributes

Data Status Properties

| Attribute | Type | Default | Description | |---|---|---|---| | id | text | — | Unique component id (required) | | data-source | text | scData.data.items | App Connect array expression to watch for empty state | | loading-state | text | scData.state.executing | App Connect boolean expression for the loading state |

Empty State

| Attribute | Type | Default | Description | |---|---|---|---| | empty-title | text | No Items Found | Heading shown when the list is empty | | empty-message | textarea | Get started by adding your first item. | Paragraph shown when the list is empty | | empty-icon | text | fas fa-folder-open | Font Awesome icon class(es) shown in the empty state |

How It Works

1. data-source and loading-state are plain attribute strings that reference App Connect scopes.
2. On connect, the component auto-writes dmx-bind:empty and dmx-bind:loading on itself so Wappler's reactive engine drives visibility.
3. The inner card renders three states:
   • Loading — spinner visible, empty state hidden, card visible
   • Empty — spinner hidden, empty state visible, card visible
   • Has data — entire card hidden (both spinner and empty state hidden)

File Structure

wappler-data-status/
├── app_connect/
│   └── components.hjson      # Wappler component definition
├── includes/
│   └── data-status.js        # Web Component + dmx.Component wrapper
├── README.md
├── LICENSE.md
└── package.json

Changelog

1.0.2 — 2026-09-10

• No changes, just a version bump.

1.0.1 — 2026-05-08

• Fix: Spinner now correctly hides when data is empty and not loading
• Fix: Empty state no longer appears alongside the spinner during initial load
• Spinner visibility now toggled via Bootstrap's d-none class instead of inline style.display, preventing Bootstrap's d-flex !important from overriding the hide logic
• dmx-bind:empty auto-expression updated to include && !loadingState guard so the empty state is suppressed while executing

1.0.0 — 2026-05-07

• Initial release
• Bootstrap 5 spinner + empty-state card
• Configurable title, message, and Font Awesome icon
• Full Wappler App Connect integration with visual property panel

License

MIT © 2026 Ben Pleysier

Support

Post questions and bug reports on the Wappler Community.