iter 2

src/pages/ProfilePage/ProfilePage.module.scss

@@ -20,7 +20,8 @@
 
 .sectionTitle {
 	font-size: 18px;
-	font-weight: 600;
+	font-weight: 700;
+	letter-spacing: -0.017em;
 	margin-bottom: 16px;
 }
 

src/pages/ProfilePage/ProfilePage.tsx

@@ -13,12 +13,23 @@ import {
 import api from "@shared/api"
 import { formatDate } from "@shared/lib/dates"
 import { useBreadcrumbs } from "@shared/context/BreadcrumbsContext"
-import { StaticLoader } from "@shared/ui/Loader"
+import { Skeleton } from "@shared/ui/Skeleton"
 import { Card } from "@shared/ui"
 
 import { IProfilePageProps } from "./ProfilePage.d"
 import styles from "./ProfilePage.module.scss"
 
+const ProfileSkeleton = () => (
+	<div className={styles.root}>
+		<div className={styles.container}>
+			<Skeleton width="120px" height="120px" borderRadius="50%" />
+			<Skeleton width="100%" height="200px" borderRadius="10px" />
+			<Skeleton width="100%" height="160px" borderRadius="10px" />
+			<Skeleton width="100%" height="140px" borderRadius="10px" />
+		</div>
+	</div>
+)
+
 export const ProfilePage: FunctionComponent<
 	IProfilePageProps
 > = (): JSX.Element => {
@@ -46,7 +57,7 @@ export const ProfilePage: FunctionComponent<
 		)
 	}
 
-	if (isLoading) return <StaticLoader fullscreen />
+	if (isLoading) return <ProfileSkeleton />
 
 	if (!user) {
 		return (