Загрузка и пустые состояния: скелеты, ожидание и пустые экраны

<!-- Пока грузится: область занята, скелет повторяет список, статус зачитывается -->
<section class="orders" aria-labelledby="orders-title" aria-busy="true">
  <h2 id="orders-title">Заказы</h2>
  <p class="visually-hidden" role="status">Загружаем заказы…</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>

<!-- Картинка с размерами: браузер держит место, пока файл не пришёл -->
<img src="/img/kitchen.webp" width="1200" height="900"
     alt="Кухня с дубовой столешницей" loading="lazy">

/* Пока область занята — скелет; после — список */
.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; }
}

/* С шириной и высотой в разметке это сохраняет пропорцию */
img {
  max-width: 100%;
  height: auto;
}

// Область становится занятой, только если ответ дольше задержки
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);
});