skeleton user

No-Country-simulation · Sep 19, 2024 · 8c5fdc8 · 8c5fdc8
1 parent 3d2a1e4
commit 8c5fdc8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -5,7 +5,6 @@ import logo from "/public/logo.svg"
 import { Footer } from "@/ui"
 import { Suspense } from "react"
 import Image from "next/image"
-import { UsersSkeleton } from "@/ui/skeleton"
 
 const BASE_URL = process.env.API_URL
 

diff --git a/frontend/src/components/swiper/SwiperUsers.tsx b/frontend/src/components/swiper/SwiperUsers.tsx
@@ -6,8 +6,12 @@ import { User } from "@/interfaces/user"
 import Image from "next/image"
 import Link from "next/link"
 import "swiper/css"
+import { useState } from "react"
+import { UsersSkeleton } from "@/ui/skeleton/usersSkeleton"
 
 export function SwiperUsers({ users }: { users: User[] }) {
+    const [loading, setLoading] = useState(true);
+
     return (
         <Swiper
             className="my-4"
@@ -21,15 +25,31 @@ export function SwiperUsers({ users }: { users: User[] }) {
         >
             {
                 users.map((user, i) => (
-                    <SwiperSlide key={i} style={{ "display": "flex", "flexDirection": "column", "alignItems": "start", "minWidth": "80px", "overflow": "hidden" } as React.CSSProperties}>
+                    <SwiperSlide key={i} style={{ "display": "flex", "alignItems": "start", "minWidth": "80px", "overflow": "hidden", "justifyContent": "space-between" } as React.CSSProperties}>
                         <Link href={'/perfil/' + user._id}>
-                            <Image src={user.imageUrl || imageAvatar} alt="foto" width={400} height={400} className="rounded-full object-cover size-20" />
+                            <Image
+                                src={user.imageUrl || imageAvatar}
+                                alt="foto"
+                                width={400}
+                                height={400}
+                                className="rounded-full object-cover size-20 mx-auto"
+                                onLoad={() => setLoading(false)}
+                            />
                             <h2 className="text-center flex-col truncate text-TextPrimary font-semibold">{user.username}</h2>
                         </Link>
+                        {loading && (
+                            Array.from({ length: 2 }).map((_, i) => (
+                                <div key={i} className="flex flex-col gap-2 justify-center items-center">
+                                    <div className="size-20 bg-gray-400 rounded-full animate-pulse" />
+                                    <div className="h-4 w-20 bg-gray-400 rounded-full animate-pulse" />
+                                </div>
+                            )
+                            )
+                        )}
                     </SwiperSlide>
                 ))
             }
-
         </Swiper>
     )
 }
+
diff --git a/frontend/src/ui/skeleton/index.tsx b/frontend/src/ui/skeleton/index.tsx
@@ -1,2 +1 @@
-export { UsersSkeleton } from './usersSkeleton'
 export { AlbumFeedSkeleton } from './albumFeedSkeleton'
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		export { UsersSkeleton } from './usersSkeleton'
		export { AlbumFeedSkeleton } from './albumFeedSkeleton'