1. Giới thiệu Khi người dùng mở ứng dụng, thời gian chờ đợi dữ liệu từ server thường tạo ra cảm giác giật lag. Skeleton UI (giao diện khung xương) và Progressive Loading (tải dần) là hai kỹ thuật giúp giảm thiểu cảm giác này mà không cần thay đổi logic nghiệp vụ. 2. Tại sao cần Skeleton UI - Giảm cảm giác chờ đợi bằng cách hiển thị ngay các khối placeholder giống cấu trúc thật. - Tăng cảm giác mượt mà, người dùng nhận diện được bố cục trước khi nội dung xuất hiện. - Dễ dàng tái sử dụng cho cả web và mobile nhờ component hóa. 3. Triển khai Skeleton trong React Web - Tạo component <SkeletonCard /> dùng CSS animation "shimmer" (gradient di chuyển) để mô phỏng tải. - Sử dụng React.lazy và Suspense để bọc component thật; khi đang load, render <SkeletonCard />. - Ví dụ: <Suspense fallback={<SkeletonCard />}><RealCard /></Suspense>. 4. Triển khai Skeleton trong React Native - Dùng thư viện react-native-skeleton-content hoặc tự viết component View với Animated.timing cho opacity. - Kết hợp với FlashList/FlatList: renderItem trả về Skeleton khi data[item] chưa sẵn sàng. - Đảm bảo layout (width, height, margin) khớp chính xác với item thật để tránh layout shift. 5. Progressive Loading kết hợp với React Query / SWR - Fetch dữ liệu theo trang (pagination) hoặc cursor. - Khi trang đầu tiên về, render ngay; các trang tiếp theo append vào danh sách và hiển thị Skeleton cho từng item mới. - Sử dụng placeholderData của React Query để giữ UI ổn định khi refetch. 6. Mẹo thực tế và lỗi thường gặp - Không lạm dụng Skeleton cho mọi component; chỉ áp dụng cho vùng tải chậm (danh sách, biểu đồ, hình ảnh lớn). - Đảm bảo độ cao placeholder cố định để tránh nhảy layout khi dữ liệu thực tế có chiều cao khác. - Tránh lồng nhiều Suspense nhau; nó khiến fallback hiển thị không đồng bộ. - Test trên thiết bị thật: mạng chậm 3G, CPU thấp để kiểm tra hiệu năng animation. 7. Kết luận Kết hợp Skeleton UI với Progressive Loading mang lại trải nghiệm "mượt mà ngay từ giây đầu" cho cả React Web và React Native. Việc component hóa placeholder và tận dụng Suspense / React Query giúp codebase sạch, dễ bảo trì và có thể mở rộng khi sản phẩm lớn dần.