data-indicator

A boolean signal that is true while a request started from the element, or from anything inside it, is in flight.

Syntax

data-indicator:saving
data-indicator="saving"

part
key	or value: the signal path
value	or key

Modifiers

modifier	effect
`__case.kebab`	keep the key kebab-cased

Disable a button while its request runs

one request

not asked yet

<div data-indicator:fetching class="row">
  <button data-on:click="@get('/api/time')" data-attr:disabled="$fetching" data-text="$fetching ? 'loading…' : 'Fetch the server time'">Fetch the server time</button>
  <span id="server-time" class="muted">not asked yet</span>
</div>

Cover a whole form

Put the indicator on a container: every request from any element inside counts, so one flag drives the spinner and the disabled state for the entire form.

container indicator with a stream

working…

<div data-indicator:running data-signals="{ progress: 0 }">
  <div class="row"><button data-on:click="@get('/api/stream')" data-attr:disabled="$running">Run a five-step job</button> <span data-show="$running">working… <b data-text="$progress + '%'"></b></span></div>
  <ul id="job-log" class="muted"></ul>
</div>

Overlapping requests

The signal stays true until the last request finishes; each request is counted separately.

two clicks, one flag

(the time in the first demo updates)

<div data-indicator:busy class="row">
  <button data-on:click="@get('/api/time', { abort: 'none' })">fetch (allow overlap)</button>
  <span data-text="$busy ? 'busy' : 'idle'"></span>
  <span class="muted">(the time in the first demo updates)</span>
</div>

Notes

The flag is driven by sigmx-fetch events (started and finished), so it also covers requests made by data-boost, data-on-interval="@get(…)" and streams. A request whose element is morphed away is still counted until it finishes.

Register

import { indicator } from 'sigmx/plugins'

Registering indicator adds 200 bytes brotli (234 gzip, 483 minified) on top of the core. See bundle sizes.