update

src/features/Home/ArticleVideo/index.tsx

@@ -6,9 +6,10 @@ import ItemArticleVideo from './ItemArticleVideo';
 import { getArticleVideos } from '@/lib/api/article';
 import { useApiData } from '@/hooks/useApiData';
 import type { Article } from '@/types';
+import Skeleton from '@/components/Common/Skeleton';
 
 const BoxArticleVideo: React.FC = () => {
-  const { data: videos } = useApiData(
+  const { data: videos, isLoading } = useApiData(
     () => getArticleVideos(),
     [],
     { initialData: [] as Article[] },
@@ -31,9 +32,17 @@ const BoxArticleVideo: React.FC = () => {
         </Link>
       </div>
       <div className="list-videos-group list-article-group flex items-center gap-10">
-        {videos.slice(0, 4).map((item) => (
-          <ItemArticleVideo item={item} key={item.id} />
-        ))}
+        {isLoading
+          ? Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="flex flex-1 flex-col gap-2">
+                <Skeleton className="aspect-video w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-3 w-3/4" />
+              </div>
+            ))
+          : videos.slice(0, 4).map((item) => (
+              <ItemArticleVideo item={item} key={item.id} />
+            ))}
       </div>
     </div>
   );