Source code

src/showcase/pages/components/api-loading.html

This file is included in this documentation build. It is displayed as code and is not executed.

Download source

<!--
Exercise global request progress with large local JSON responses and explicit failure controls.

@author Laurent Declercq l.declercq@agon-innovation.ch
@version 20260921
-->
<section x-data="apiLoading" class="component-library">
  <include
    src="partials/components/page-header.html"
    locals='{"title":"componentApiLoading"}'
  ></include>
  <p class="text-muted" x-text="$t('apiIntro')"></p>
  <article class="card mb-4">
    <div class="card-body">
      <div class="row g-3 mb-3">
        <div class="col-md-6">
          <label class="form-label" for="api-size" x-text="$t('apiSize')"></label>
          <select id="api-size" class="form-select" x-model="size">
            <option value="1000">1 000</option>
            <option value="10000">10 000</option>
            <option value="50000">50 000</option>
          </select>
        </div>
        <div class="col-md-6">
          <label class="form-label" for="api-latency" x-text="$t('apiLatency')"></label>
          <select id="api-latency" class="form-select" x-model="latency">
            <option value="1000">1 s</option>
            <option value="3000">3 s</option>
            <option value="6000">6 s</option>
          </select>
        </div>
      </div>
      <div class="demo-row">
        <button class="btn btn-primary" type="button" @click="load" x-text="$t('apiLoad')"></button>
        <button
          class="btn btn-secondary"
          type="button"
          @click="fail"
          x-text="$t('apiFail')"
        ></button>
        <button
          class="btn btn-secondary"
          type="button"
          @click="cancel"
          :disabled="active === 0"
          x-text="$t('apiCancel')"
        ></button>
      </div>
      <p class="form-text mt-3" x-text="$t('apiOverlap')"></p>
      <p role="status" aria-live="polite" data-api-status x-text="$t(state)"></p>
      <dl class="row mb-0">
        <dt class="col-sm-4" x-text="$t('apiActive')"></dt>
        <dd class="col-sm-8" data-api-active x-text="active"></dd>
        <dt class="col-sm-4" x-text="$t('apiReceived')"></dt>
        <dd class="col-sm-8" data-api-total x-text="total"></dd>
        <dt class="col-sm-4" x-text="$t('apiPayload')"></dt>
        <dd class="col-sm-8">
          <span x-text="megabytes"></span>
          MB
        </dd>
      </dl>
    </div>
  </article>
  <article class="card">
    <header class="card-header"><h2 x-text="$t('apiPreview')"></h2></header>
    <div class="table-responsive">
      <table class="table mb-0">
        <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col" x-text="$t('name')"></th>
            <th scope="col" x-text="$t('apiRegion')"></th>
            <th scope="col" x-text="$t('apiAmount')"></th>
          </tr>
        </thead>
        <tbody>
          <template x-for="item in items" :key="item.id">
            <tr>
              <td x-text="item.id"></td>
              <td x-text="item.name"></td>
              <td x-text="item.region"></td>
              <td x-text="item.amount"></td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </article>
</section>