Trải nghiệm chờ (Wait UX)

import { useSpinDelay, Spinner } from "@/components/ui";

function Orders({ query }: { query: Query }) {
  const { data, isFetching } = useOrders(query);
  // < 300ms: không bao giờ hiện · đã hiện: giữ ≥ 500ms
  const showSpinner = useSpinDelay(isFetching, { delay: 300, minDuration: 500 });

  return (
    <section aria-busy={isFetching}>
      {showSpinner && <Spinner size="tiny" label="Đang cập nhật…" />}
      <OrderTable rows={data} />
    </section>
  );
}

import { useOptimisticList } from "@/components/ui";

const { items, mutate, pending } = useOptimisticList<Photo>(initialPhotos);

// 1. update áp ngay lên giao diện — viết theo id, không theo vị trí
// 2. commit chạy phía sau; lỗi → chỉ thay đổi này bị gỡ, toast "Thử lại" hiện ra
const ok = await mutate(
  (list) => list.map((p) => (p.id === id ? { ...p, starred: !p.starred } : p)),
  () => api.photos.star(id),
  { errorTitle: "Không đánh dấu được ảnh" },
);

useEffect(() => {
  const controller = new AbortController();
  // Huỷ khi rời màn hình / đổi bộ lọc, và tự dừng nếu quá 10 giây.
  const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(10_000)]);

  fetch(`/api/orders?q=${query}`, { signal })
    .then((res) => res.json())
    .then(setOrders)
    .catch((error) => {
      if (error.name === "AbortError") return;            // huỷ chủ động: im lặng
      if (error.name === "TimeoutError") setStatus("timeout"); // nói rõ là quá lâu
      else setStatus("error");
    });

  return () => controller.abort();
}, [query]);

// Thử lại tự động cho lỗi tạm thời (mạng, 5xx, 429) — lùi dần và có giới hạn.
async function withRetry<T>(task: () => Promise<T>, { retries = 3, base = 500 } = {}) {
  for (let attempt = 0; ; attempt++) {
    try {
      return await task();
    } catch (error) {
      if (attempt >= retries || !isTransient(error)) throw error;
      const wait = base * 2 ** attempt * (0.5 + Math.random()); // 500 → 1000 → 2000ms, có jitter
      await new Promise((r) => setTimeout(r, wait));
    }
  }
}

// Hết lượt tự động → trao quyền cho người dùng
<AsyncContent status={status} onRetry={reload} skeleton={<SkeletonList rows={5} />}>
  {() => <MemberList members={data!} />}
</AsyncContent>

{/* 1. Vùng đang tải: aria-busy để công nghệ hỗ trợ chờ cập nhật xong mới đọc */}
<section aria-busy={isLoading}>…</section>

{/* 2. Nói bằng lời khi chờ đủ lâu để thấy loader (LoadingOverlay, AsyncContent tự làm) */}
const { announce } = useAnnounce();
announce("Đang tải đơn hàng…");
announce(`Đã tải ${count} đơn hàng`, { batchId: "orders" });

{/* 3. Nút đang xử lý vẫn giữ focus: aria-busy + aria-disabled, không dùng disabled */}
<Button appearance="primary" loading={saving} loadingText="Đang lưu…">Lưu</Button>

{/* 4. Lỗi sau thao tác người dùng đang chờ: role="alert" */}
<ErrorState variant="alert" onRetry={retry} />