feat(web-ui): improve profile page skeleton (#796)

Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>

Author: johanbook

services/web-ui/src/pages/ProfilePage/ProfilePage.skeleton.tsx

@@ -1,24 +1,23 @@
-import React from "react";
+import { ReactElement } from "react";
 
-import { Skeleton, Typography } from "@mui/material";
+import { Skeleton } from "@mui/material";
 
 import { Center } from "src/components/ui/Center";
-import { useTranslation } from "src/core/i18n";
-
-export function ProfilePageSkeleton(): React.ReactElement {
-  const { t } = useTranslation("profile");
 
+export function ProfilePageSkeleton(): ReactElement {
   return (
     <>
       <Center>
-        <Skeleton height={200} variant="circular" width={200} />
+        <Skeleton height={160} variant="circular" width={160} />
       </Center>
 
-      <Typography gutterBottom sx={{ paddingTop: 2 }} variant="h5">
-        {t("description.title")}
-      </Typography>
+      <Center>
+        <Skeleton height={60} width={120} />
+      </Center>
 
-      <Skeleton height={200} />
+      <Center>
+        <Skeleton height={60} width={240} />
+      </Center>
     </>
   );
 }