<>Skeleton Loaders là các khung xám hoặc trắng mô phỏng giao diện nội dung khi đang tải, giúp người dùng biết rằng dữ liệu sắp xuất hiện thay vì nhìn thấy một màn hình trống hoặc vòng xoay loading.
🚀 Mục tiêu chính:
✅ Giảm cảm giác chờ đợi của người dùng.
✅ Cải thiện trải nghiệm UX bằng cách cung cấp gợi ý về nội dung sắp hiển thị.
✅ Giúp giao diện trông liền mạch hơn thay vì hiển thị màn hình trống.
/Khi nào nên sử dụng Skeleton Loaders?
✅ Khi tải nội dung động như bài viết, danh sách sản phẩm, hình ảnh, bảng dữ liệu…
✅ Khi dữ liệu cần thời gian tải trên 1 giây.
✅ Khi muốn giảm cảm giác chờ đợi thay vì dùng vòng xoay loading (spinners).
🚫 Không nên dùng nếu dữ liệu tải ngay lập tức – vì nó có thể gây khó chịu hơn là giúp ích.
/Cấu trúc của Skeleton Loaders
🔹 Hình dạng cơ bản: Các khối xám hoặc trắng mô phỏng vị trí của nội dung (text, hình ảnh, nút).
🔹 Hiệu ứng shimmer: Một lớp sáng chạy qua giúp tạo cảm giác đang tải.
🔹 Kích thước và tỷ lệ tương đồng: Skeleton nên có hình dạng tương tự với nội dung thực tế để không gây bất ngờ khi tải xong.
📌 Ví dụ:
Loading danh sách bài viết: Các khung hình chữ nhật dài (cho tiêu đề) + khung vuông nhỏ (cho avatar).
Loading ảnh sản phẩm: Một khung hình chữ nhật lớn.
