Skip to main content

Loading & Empty State

Trải nghiệm khi dữ liệu đang tải hoặc không có dữ liệu.

Skeleton Loading​

Đã thêm Skeleton Loading cho các component khi đang tải dữ liệu (thay vì để trống hoặc spinner toàn màn hình khi không cần thiết). Skeleton nên phản ánh layout nội dung sẽ hiển thị (ví dụ: bảng có 5 cột thì skeleton 5 cột).

Ví dụ: Danh sách bảng dùng <TableSkeleton rows={5} />, card dùng <CardSkeleton /> theo design system.

Empty State​

Đã thêm Empty State khi không có dữ liệu (danh sách rỗng, không có kết quả tìm kiếm). Empty state nên có message rõ ràng và có thể kèm CTA (ví dụ: "Chưa có đơn hàng" + nút "Tạo đơn hàng").

Ví dụ:

if (isLoading) return <TableSkeleton />;
if (!data?.length) return <EmptyState message="Chưa có dữ liệu" action={<Button>Tạo mới</Button>} />;
return <Table data={data} />;