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 (
<>
-
-
+
+
{t("activity")}
+ {Array.from({ length: 3 }).map((_, index) => (
+
+ ))}
+
+
+
+
{t("library")}
+
+ {Array.from({ length: 8 }).map((_, index) => (
+
+ ))}
+
+
>
);
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({