From 6b03705d54b749d6fb32a216da7422b3003b0487 Mon Sep 17 00:00:00 2001
From: Zamitto <167933696+zamitto@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:57:23 -0300
Subject: [PATCH] better skeleton loading on user profile

---
 src/renderer/src/pages/user/user-skeleton.tsx | 31 +++++++++++++++++--
 src/renderer/src/pages/user/user.css.ts       |  5 +--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/renderer/src/pages/user/user-skeleton.tsx b/src/renderer/src/pages/user/user-skeleton.tsx
index 442322cc..dc23fb0e 100644
--- a/src/renderer/src/pages/user/user-skeleton.tsx
+++ b/src/renderer/src/pages/user/user-skeleton.tsx
@@ -1,13 +1,40 @@
 import Skeleton from "react-loading-skeleton";
+import cn from "classnames";
 import * as styles from "./user.css";
+import { SPACING_UNIT } from "@renderer/theme.css";
+import { useTranslation } from "react-i18next";
 
 export const UserSkeleton = () => {
+  const { t } = useTranslation("user_profile");
   return (
     <>
       <Skeleton className={styles.profileHeaderSkeleton} />
       <div className={styles.profileContent}>
-        <Skeleton height={140} style={{ flex: 1 }} />
-        <Skeleton width={300} className={styles.contentSidebar} />
+        <div className={styles.profileGameSection}>
+          <h2>{t("activity")}</h2>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <Skeleton
+              key={index}
+              height={72}
+              style={{ flex: "1", width: "100%" }}
+            />
+          ))}
+        </div>
+
+        <div className={cn(styles.contentSidebar, styles.profileGameSection)}>
+          <h2>{t("library")}</h2>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(4, 1fr)",
+              gap: `${SPACING_UNIT}px`,
+            }}
+          >
+            {Array.from({ length: 8 }).map((_, index) => (
+              <Skeleton key={index} style={{ aspectRatio: "1" }} />
+            ))}
+          </div>
+        </div>
       </div>
     </>
   );
diff --git a/src/renderer/src/pages/user/user.css.ts b/src/renderer/src/pages/user/user.css.ts
index a74a4441..3a9b4c86 100644
--- a/src/renderer/src/pages/user/user.css.ts
+++ b/src/renderer/src/pages/user/user.css.ts
@@ -132,9 +132,6 @@ export const feedItem = style({
 
 export const gameListItem = style({
   color: vars.color.body,
-  display: "flex",
-  flexDirection: "row",
-  gap: `${SPACING_UNIT}px`,
   transition: "all ease 0.2s",
   cursor: "pointer",
   zIndex: "1",
@@ -153,7 +150,7 @@ export const gameInformation = style({
 });
 
 export const profileHeaderSkeleton = style({
-  height: "200px",
+  height: "144px",
 });
 
 export const editProfileImageBadge = style({