Loading and empty states: skeletons, waiting and blank screens

<!-- While loading: the region is busy, the skeleton repeats the list, the status is read aloud -->
<section class="orders" aria-labelledby="orders-title" aria-busy="true">
  <h2 id="orders-title">Orders</h2>
  <p class="visually-hidden" role="status">Loading orders…</p>

  <ul class="skeleton" aria-hidden="true">
    <li class="skeleton__row"></li>
    <li class="skeleton__row"></li>
    <li class="skeleton__row"></li>
  </ul>

  <ul class="orders__list"></ul>
</section>

<!-- An image with its size: the browser keeps the space before the file arrives -->
<img src="/img/kitchen.webp" width="1200" height="900"
     alt="A kitchen with an oak worktop" loading="lazy">

/* While the region is busy — the skeleton; after — the list */
.orders[aria-busy="true"] .orders__list,
.orders:not([aria-busy="true"]) .skeleton {
  display: none;
}

.skeleton__row {
  height: 4rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-skeleton), var(--color-skeleton-light), var(--color-skeleton));
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton__row { animation: none; }
}

/* With width and height in the markup, this keeps the proportion */
img {
  max-width: 100%;
  height: auto;
}

// The region becomes busy only if the answer takes longer than the delay
async function withLoader(region, task, delay = 500) {
  const timer = setTimeout(() => region.setAttribute('aria-busy', 'true'), delay);
  try {
    return await task();
  } finally {
    clearTimeout(timer);
    region.setAttribute('aria-busy', 'false');
  }
}

const section = document.querySelector('.orders');
const filters = document.querySelector('.filters');

filters.addEventListener('change', async () => {
  const query = new URLSearchParams(new FormData(filters));
  const orders = await withLoader(section, () =>
    fetch(`/api/orders?${query}`).then((response) => response.json()));
  renderOrders(orders);
});