Utilities

Polling

Asks the server again until a long job is done, or refreshes a view on a timer — with growing pauses, a pause while the tab is hidden, retries and no overlapping requests.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features3

API

Theming

Job

poll repeats the request while the job is running and completes when it is done. A pretend export server here; the pauses grow from 0.5 s.

Not started.

12 lines

<div class="stack">  <div>    <button      txButton      label="Export 12 000 rows"      [loading]="running()"      (click)="start()"    ></button>  </div>  <tx-progress-bar [value]="job()?.progress ?? 0" />  <span class="hint">{{ status() }}</span></div>

Refresh every

refreshEvery reloads a value every 2 s while the switch is on; a slow answer never overlaps the next one, and a hidden tab pauses it.

Live updates

Active users: 128 · refreshed 0 times

9 lines

<div class="stack">  <div class="flex">    <tx-toggle-switch inputId="polling-live" [(ngModel)]="live" />    <label for="polling-live">Live updates</label>  </div>  <span class="hint"    >Active users: <strong>{{ users() }}</strong> · refreshed {{ refreshes() }} times</span  ></div>

Poller

TxPoller keeps the state of a page in signals: loading, polling and the last error. This pretend deploy fails on the third check — press Restart to try again.

Idle

34 lines

<div class="stack">  <div class="flex">    <button txButton label="Deploy" [disabled]="poller.isPolling()" (click)="deploy()"></button>    <button      txButton      label="Restart"      severity="secondary"      [disabled]="!poller.error()"      (click)="poller.restart()"    ></button>    <button      txButton      label="Stop"      severity="secondary"      [disabled]="!poller.isPolling()"      (click)="poller.stop()"    ></button>  </div>  <div class="flex">    <tx-tag      [value]="poller.isLoading() ? 'Loading' : poller.isPolling() ? 'Polling' : 'Idle'"      [severity]="poller.isPolling() ? 'info' : 'secondary'"    />    @if (state(); as current) {      <tx-tag        [value]="current.state + ' · step ' + current.step"        [severity]="current.state === 'live' ? 'success' : 'warn'"      />    }  </div>  @if (poller.error(); as error) {    <tx-message severity="danger" [text]="error.status + ': ' + error.message" />  }</div>