better skeleton loading on user profile

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>
     </>
   );

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({