From 3e5fcff1830b66035692121463478baead454746 Mon Sep 17 00:00:00 2001 From: "minor.dm" Date: Sat, 16 May 2026 22:37:36 +0500 Subject: [PATCH 1/2] =?UTF-8?q?YH-1968:=20refactor=20ProfilePage.skeleton?= =?UTF-8?q?=20=D0=B8=20UserProfilePage.skeleton,=20add=20shared=20ui=20Ske?= =?UTF-8?q?letonBlock,=20add=20InfoBlock.skeleton,=20SkillsBlock.skeleton?= =?UTF-8?q?=20and=20UserBlock.skeleton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ui/ProfilePage/ProfilePage.module.css | 65 ------------- .../ui/ProfilePage/ProfilePage.skeleton.tsx | 93 ++----------------- .../UserProfilePage.module.css | 62 ------------- .../UserProfilePage.skeleton.tsx | 93 ++----------------- .../ui/SkeletonBlock/SkeletonBlock.module.css | 25 +++++ src/shared/ui/SkeletonBlock/SkeletonBlock.tsx | 25 +++++ src/shared/ui/SkeletonBlock/index.ts | 1 + src/widgets/Profile/InfoBlock/index.ts | 1 + .../ui/InfoBlock/InfoBlock.skeleton.tsx | 15 +++ src/widgets/Profile/SkillsBlock/index.ts | 1 + .../ui/SkillsBlock/SkillsBlock.skeleton.tsx | 17 ++++ src/widgets/Profile/UserBlock/index.ts | 2 +- .../ui/UserBlock/UserBlock.module.css | 35 +++++++ .../ui/UserBlock/UserBlock.skeleton.tsx | 58 ++++++++++++ .../Profile/UserBlock/ui/UserBlock/index.ts | 1 + 15 files changed, 192 insertions(+), 302 deletions(-) create mode 100644 src/shared/ui/SkeletonBlock/SkeletonBlock.module.css create mode 100644 src/shared/ui/SkeletonBlock/SkeletonBlock.tsx create mode 100644 src/shared/ui/SkeletonBlock/index.ts create mode 100644 src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx create mode 100644 src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx create mode 100644 src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx diff --git a/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.module.css b/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.module.css index e686c53e2..3c9bc6c13 100644 --- a/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.module.css +++ b/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.module.css @@ -1,7 +1,3 @@ -.title { - margin: 0; -} - .content { display: flex; flex-direction: row; @@ -26,53 +22,6 @@ width: 360px; } -.separator { - margin: 16px 0; - width: 100%; - height: 1px; - background-color: var(--color-black-50); -} - -.profile-card-skeleton, -.card-skeleton { - gap: 0; - height: auto; -} - -.profile-card-skeleton { - padding: 16px; -} - -.flex-profile-skeleton { - display: flex; - gap: 16px; -} - -.card-skeleton { - padding: 24px; -} - -.profile-card-skeleton, -.card-skeleton:not(:last-child) { - margin-bottom: 24px; -} - -.header-card-skeleton { - margin-bottom: 20px; -} - -.sleleton-link { - margin-left: auto; - width: 100px; - height: 20px; -} - -@media (width <= 1280px) { - .sleleton-link { - width: 20px; - } -} - @media (width <= 1440px) { .content { flex-direction: column-reverse; @@ -87,17 +36,3 @@ width: 100%; } } - -@media (width <= 720px) { - .flex-profile-skeleton { - flex-direction: column; - } - - .sleleton-link-profile { - order: -1; - } - - .card { - min-height: 100%; - } -} \ No newline at end of file diff --git a/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.skeleton.tsx b/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.skeleton.tsx index b8bbd100d..ab1cf1962 100644 --- a/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.skeleton.tsx +++ b/src/pages/profile/profileInfo/ui/ProfilePage/ProfilePage.skeleton.tsx @@ -1,6 +1,6 @@ -import { Card } from '@/shared/ui/Card'; -import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; +import { InfoBlockSkeleton } from '@/widgets/Profile/InfoBlock'; +import { SkillsBlockSkeleton } from '@/widgets/Profile/SkillsBlock'; +import { UserBlockSkeleton } from '@/widgets/Profile/UserBlock'; import styles from './ProfilePage.module.css'; @@ -8,90 +8,9 @@ export const ProfilePageSkeleton = () => { return (
- -
- - - - - - - - - - - - - - {[...Array(4)].map((_, index) => ( - - - - ))} - - - {[...Array(2)].map((_, index) => ( - - - - ))} - - - {[...Array(6)].map((_, index) => ( - - - - ))} - - -
-
- -
-
-
- - -
- - -
-
- -
-
- -
- - {[...Array(6)].map((_, index) => ( - - ))} - - - -
- - -
-
- -
-
- -
- - {[...Array(8)].map((_, index) => ( - - - - ))} - - + + +
); diff --git a/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.module.css b/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.module.css index 72e19b6a8..1b7c188cd 100644 --- a/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.module.css +++ b/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.module.css @@ -1,7 +1,3 @@ -.title { - margin: 0; -} - .content { display: flex; flex-direction: row; @@ -26,52 +22,6 @@ width: 360px; } -.separator { - margin: 16px 0; - width: 100%; - height: 1px; - background-color: var(--color-black-50); -} - -.profile-card-skeleton, -.card-skeleton { - gap: 0; - height: auto; -} - -.profile-card-skeleton { - padding: 16px; -} - -.flex-profile-skeleton { - display: flex; - gap: 16px; -} - -.card-skeleton { - padding: 24px; -} - -.profile-card-skeleton, -.card-skeleton:not(:last-child) { - margin-bottom: 24px; -} - -.header-card-skeleton { - margin-bottom: 20px; -} - -.sleleton-link { - margin-left: auto; - width: 100px; - height: 20px; -} - -@media (width <= 1280px) { - .sleleton-link { - width: 20px; - } -} @media (width <= 1440px) { .content { @@ -89,18 +39,6 @@ } @media (width <= 720px) { - .flex-profile-skeleton { - flex-direction: column; - } - - .sleleton-link-profile { - order: -1; - } - - .card { - min-height: 100%; - } - .content { gap: 0 } diff --git a/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.skeleton.tsx b/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.skeleton.tsx index 47873ccee..99efae79b 100644 --- a/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.skeleton.tsx +++ b/src/pages/profile/userProfile/ui/UserProfilePage/UserProfilePage.skeleton.tsx @@ -1,6 +1,6 @@ -import { Card } from '@/shared/ui/Card'; -import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; +import { InfoBlockSkeleton } from '@/widgets/Profile/InfoBlock'; +import { SkillsBlockSkeleton } from '@/widgets/Profile/SkillsBlock'; +import { UserBlockSkeleton } from '@/widgets/Profile/UserBlock'; import styles from './UserProfilePage.module.css'; @@ -8,90 +8,9 @@ export const UserProfilePageSkeleton = () => { return (
- -
- - - - - - - - - - - - - - {[...Array(4)].map((_, index) => ( - - - - ))} - - - {[...Array(2)].map((_, index) => ( - - - - ))} - - - {[...Array(6)].map((_, index) => ( - - - - ))} - - -
-
- -
-
-
- - -
- - -
-
- -
-
- -
- - {[...Array(6)].map((_, index) => ( - - ))} - - - -
- - -
-
- -
-
- -
- - {[...Array(8)].map((_, index) => ( - - - - ))} - - + + +
); diff --git a/src/shared/ui/SkeletonBlock/SkeletonBlock.module.css b/src/shared/ui/SkeletonBlock/SkeletonBlock.module.css new file mode 100644 index 000000000..54df02827 --- /dev/null +++ b/src/shared/ui/SkeletonBlock/SkeletonBlock.module.css @@ -0,0 +1,25 @@ +.card-skeleton { + gap: 0; + padding: 24px; + height: auto; +} + +.card-skeleton:not(:last-child) { + margin-bottom: 24px; +} + +.header-card-skeleton { + margin-bottom: 20px; +} + +.sleleton-link { + margin-left: auto; + width: 100px; + height: 20px; +} + +@media (width <=1280px) { + .sleleton-link { + width: 20px; + } +} \ No newline at end of file diff --git a/src/shared/ui/SkeletonBlock/SkeletonBlock.tsx b/src/shared/ui/SkeletonBlock/SkeletonBlock.tsx new file mode 100644 index 000000000..58b06bc48 --- /dev/null +++ b/src/shared/ui/SkeletonBlock/SkeletonBlock.tsx @@ -0,0 +1,25 @@ +import { PropsWithChildren } from 'react'; + +import { Card } from '../Card'; +import { Flex } from '../Flex'; +import { Skeleton } from '../Skeleton/Skeleton'; + +import styles from './SkeletonBlock.module.css'; + +export const SkeletonBlock = ({ children }: PropsWithChildren) => { + return ( + +
+ + +
+
+ +
+
+ +
+ {children} + + ); +}; diff --git a/src/shared/ui/SkeletonBlock/index.ts b/src/shared/ui/SkeletonBlock/index.ts new file mode 100644 index 000000000..97e46a632 --- /dev/null +++ b/src/shared/ui/SkeletonBlock/index.ts @@ -0,0 +1 @@ +export { SkeletonBlock } from './SkeletonBlock'; diff --git a/src/widgets/Profile/InfoBlock/index.ts b/src/widgets/Profile/InfoBlock/index.ts index 5d90517a4..f2ea76b99 100644 --- a/src/widgets/Profile/InfoBlock/index.ts +++ b/src/widgets/Profile/InfoBlock/index.ts @@ -1,3 +1,4 @@ +export { InfoBlockSkeleton } from './ui/InfoBlock/InfoBlock.skeleton'; export { InfoBlock } from './ui/InfoBlock/InfoBlock'; export { InfoBlockHeader } from './ui/InfoBlockHeader/InfoBlockHeader'; export { InfoBlockText } from './ui/InfoBlockText/InfoBlockText'; diff --git a/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx b/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx new file mode 100644 index 000000000..6ed6197ec --- /dev/null +++ b/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx @@ -0,0 +1,15 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; +import { SkeletonBlock } from '@/shared/ui/SkeletonBlock'; + +export const InfoBlockSkeleton = () => { + return ( + + + {[...Array(6)].map((_, index) => ( + + ))} + + + ); +}; diff --git a/src/widgets/Profile/SkillsBlock/index.ts b/src/widgets/Profile/SkillsBlock/index.ts index 89d0056fc..cb346164f 100644 --- a/src/widgets/Profile/SkillsBlock/index.ts +++ b/src/widgets/Profile/SkillsBlock/index.ts @@ -1,3 +1,4 @@ +export { SkillsBlockSkeleton } from './ui/SkillsBlock/SkillsBlock.skeleton'; export { SkillsBlock } from './ui/SkillsBlock/SkillsBlock'; export { SkillsBlockList } from './ui/SkillsBlockList/SkillsBlockList'; export { SkillsBlockItem } from './ui/SkillsBlockItem/SkillsBlockItem'; diff --git a/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx b/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx new file mode 100644 index 000000000..b3d455e5d --- /dev/null +++ b/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx @@ -0,0 +1,17 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; +import { SkeletonBlock } from '@/shared/ui/SkeletonBlock'; + +export const SkillsBlockSkeleton = () => { + return ( + + + {[...Array(8)].map((_, index) => ( + + + + ))} + + + ); +}; diff --git a/src/widgets/Profile/UserBlock/index.ts b/src/widgets/Profile/UserBlock/index.ts index bd65ba273..a1ef9abd6 100644 --- a/src/widgets/Profile/UserBlock/index.ts +++ b/src/widgets/Profile/UserBlock/index.ts @@ -1 +1 @@ -export { UserBlock } from './ui/UserBlock'; +export { UserBlock, UserBlockSkeleton } from './ui/UserBlock'; diff --git a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css index 3385c8193..64aa21d88 100644 --- a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css +++ b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css @@ -12,6 +12,31 @@ width: 100%; } +.profile-card-skeleton { + gap: 0; + margin-bottom: 24px; + padding: 16px; + height: auto; +} + +.skeleton-link { + margin-left: auto; + width: 100px; + height: 20px; +} + +.flex-profile-skeleton { + display: flex; + gap: 16px; +} + +@media (width <=1280px) { + .skeleton-link { + width: 20px; + } +} + + @media (width <= 768px) { .card { flex-direction: column; @@ -29,3 +54,13 @@ width: 100%; } } + +@media (width <=720px) { + .flex-profile-skeleton { + flex-direction: column; + } + + .skeleton-link-profile { + order: -1; + } +} \ No newline at end of file diff --git a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx new file mode 100644 index 000000000..a4eb1924f --- /dev/null +++ b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx @@ -0,0 +1,58 @@ +import { Card } from '@/shared/ui/Card'; +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +import styles from './UserBlock.module.css'; + +export const UserBlockSkeleton = () => { + return ( + +
+ + + + + + + + + + + + + + {[...Array(4)].map((_, index) => ( + + + + ))} + + + {[...Array(2)].map((_, index) => ( + + + + ))} + + + {[...Array(6)].map((_, index) => ( + + + + ))} + + +
+
+ +
+
+
+ + ); +}; diff --git a/src/widgets/Profile/UserBlock/ui/UserBlock/index.ts b/src/widgets/Profile/UserBlock/ui/UserBlock/index.ts index fd27aff41..b599a1ec3 100644 --- a/src/widgets/Profile/UserBlock/ui/UserBlock/index.ts +++ b/src/widgets/Profile/UserBlock/ui/UserBlock/index.ts @@ -1 +1,2 @@ export { UserBlock } from './UserBlock'; +export { UserBlockSkeleton } from './UserBlock.skeleton'; From 43beb6b7b43e1dae7e7f2901884803c3ca262742 Mon Sep 17 00:00:00 2001 From: "minor.dm" Date: Sun, 17 May 2026 21:22:06 +0500 Subject: [PATCH 2/2] YH-1968: change from spinner to skeleton for UserProfilePage, refactor UserBlockSkeleton, InfoBlockSkeleton, SkillsBlockSkeleton, deleted unused styles --- .../SkeletonGenerator/SkeletonGenerator.tsx | 6 +++ src/entities/user/index.ts | 1 + .../UserEditButton/UserEditButton.module.css | 18 +++++++ .../UserEditButton.skeleton.tsx | 13 +++++ .../ui/SkeletonBlock/SkeletonBlock.module.css | 25 --------- src/shared/ui/SkeletonBlock/SkeletonBlock.tsx | 25 --------- src/shared/ui/SkeletonBlock/index.ts | 1 - src/widgets/Profile/InfoBlock/index.ts | 2 + .../ui/InfoBlock/InfoBlock.module.css | 6 +++ .../ui/InfoBlock/InfoBlock.skeleton.tsx | 20 +++---- .../InfoBlockHeader.module.css | 7 ++- .../InfoBlockHeader.skeleton.tsx | 17 ++++++ .../InfoBlockText/InfoBlockText.skeleton.tsx | 12 +++++ src/widgets/Profile/SkillsBlock/index.ts | 2 + .../ui/SkillsBlock/SkillsBlock.module.css | 6 +++ .../ui/SkillsBlock/SkillsBlock.skeleton.tsx | 22 ++++---- .../SkillsBlockHeader.module.css | 5 +- .../SkillsBlockHeader.skeleton.tsx | 17 ++++++ .../SkillsBlockList.skeleton.tsx | 14 +++++ .../ui/UserBlock/UserBlock.module.css | 18 ------- .../ui/UserBlock/UserBlock.skeleton.tsx | 54 +++---------------- .../UserImageBlock.skeleton.tsx | 14 +++++ .../UserBlock/ui/UserImageBlock/index.ts | 1 + .../UserInfoBlock/UserInfoBlock.skeleton.tsx | 34 ++++++++++++ .../UserBlock/ui/UserInfoBlock/index.ts | 1 + 25 files changed, 197 insertions(+), 144 deletions(-) create mode 100644 src/entities/user/ui/UserEditButton/UserEditButton.skeleton.tsx delete mode 100644 src/shared/ui/SkeletonBlock/SkeletonBlock.module.css delete mode 100644 src/shared/ui/SkeletonBlock/SkeletonBlock.tsx delete mode 100644 src/shared/ui/SkeletonBlock/index.ts create mode 100644 src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.skeleton.tsx create mode 100644 src/widgets/Profile/InfoBlock/ui/InfoBlockText/InfoBlockText.skeleton.tsx create mode 100644 src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.skeleton.tsx create mode 100644 src/widgets/Profile/SkillsBlock/ui/SkillsBlockList/SkillsBlockList.skeleton.tsx create mode 100644 src/widgets/Profile/UserBlock/ui/UserImageBlock/UserImageBlock.skeleton.tsx create mode 100644 src/widgets/Profile/UserBlock/ui/UserInfoBlock/UserInfoBlock.skeleton.tsx diff --git a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx index 688a7faa4..c6fc193cc 100644 --- a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx +++ b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx @@ -21,6 +21,7 @@ import { InterviewQuizResultPageSkeleton } from '@/pages/interview/interviewQuiz import { InterviewStatisticsPageSkeleton } from '@/pages/interview/interviewStatistics'; import { MainPageSkeleton } from '@/pages/interview/main'; import { ProfilePageSkeleton } from '@/pages/profile/profileInfo'; +import { UserProfilePageSkeleton } from '@/pages/profile/userProfile'; import { QuestionsPageSkeleton } from '@/pages/wiki/question/questions'; const SkeletonGenerator = () => { @@ -31,6 +32,7 @@ const SkeletonGenerator = () => { ROUTES.admin.questions.details.page, location.pathname, ); + const isUserProfilePage = matchPath(ROUTES.users.page, location.pathname); if (isInterviewResultPage) { return ; @@ -40,6 +42,10 @@ const SkeletonGenerator = () => { return ; } + if (isUserProfilePage) { + return ; + } + switch (location.pathname) { case ROUTES.appRoute: return ; diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts index 5116ca93e..40e521970 100644 --- a/src/entities/user/index.ts +++ b/src/entities/user/index.ts @@ -17,6 +17,7 @@ export { export { UserCard } from './ui/UserCard/UserCard'; export { RoleSelect } from './ui/RoleSelect/RoleSelect'; export { UserEditButton } from './ui/UserEditButton/UserEditButton'; +export { UserEditButtonSkeleton } from './ui/UserEditButton/UserEditButton.skeleton'; export { UserRolesList } from './ui/UserRolesList/UserRolesList'; export { UserSelect } from './ui/UserSelect/UserSelect'; export { UserSelectSkeleton } from './ui/UserSelect/UserSelect.skeleton'; diff --git a/src/entities/user/ui/UserEditButton/UserEditButton.module.css b/src/entities/user/ui/UserEditButton/UserEditButton.module.css index e196dbfdd..07b59a541 100644 --- a/src/entities/user/ui/UserEditButton/UserEditButton.module.css +++ b/src/entities/user/ui/UserEditButton/UserEditButton.module.css @@ -3,3 +3,21 @@ margin-left: auto; font-size: var(--font-size-p-s); } + +.skeleton-link { + margin-left: auto; + width: 100px; + height: 20px; +} + +@media (width <=1280px) { + .skeleton-link { + width: 20px; + } +} + +@media (width <=720px) { + .skeleton-link-profile { + order: 1; + } +} \ No newline at end of file diff --git a/src/entities/user/ui/UserEditButton/UserEditButton.skeleton.tsx b/src/entities/user/ui/UserEditButton/UserEditButton.skeleton.tsx new file mode 100644 index 000000000..11634c2ff --- /dev/null +++ b/src/entities/user/ui/UserEditButton/UserEditButton.skeleton.tsx @@ -0,0 +1,13 @@ +import { Skeleton } from '@/shared/ui/Skeleton'; + +import styles from './UserEditButton.module.css'; + +export const UserEditButtonSkeleton = () => { + return ( +
+
+ +
+
+ ); +}; diff --git a/src/shared/ui/SkeletonBlock/SkeletonBlock.module.css b/src/shared/ui/SkeletonBlock/SkeletonBlock.module.css deleted file mode 100644 index 54df02827..000000000 --- a/src/shared/ui/SkeletonBlock/SkeletonBlock.module.css +++ /dev/null @@ -1,25 +0,0 @@ -.card-skeleton { - gap: 0; - padding: 24px; - height: auto; -} - -.card-skeleton:not(:last-child) { - margin-bottom: 24px; -} - -.header-card-skeleton { - margin-bottom: 20px; -} - -.sleleton-link { - margin-left: auto; - width: 100px; - height: 20px; -} - -@media (width <=1280px) { - .sleleton-link { - width: 20px; - } -} \ No newline at end of file diff --git a/src/shared/ui/SkeletonBlock/SkeletonBlock.tsx b/src/shared/ui/SkeletonBlock/SkeletonBlock.tsx deleted file mode 100644 index 58b06bc48..000000000 --- a/src/shared/ui/SkeletonBlock/SkeletonBlock.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { Card } from '../Card'; -import { Flex } from '../Flex'; -import { Skeleton } from '../Skeleton/Skeleton'; - -import styles from './SkeletonBlock.module.css'; - -export const SkeletonBlock = ({ children }: PropsWithChildren) => { - return ( - -
- - -
-
- -
-
- -
- {children} - - ); -}; diff --git a/src/shared/ui/SkeletonBlock/index.ts b/src/shared/ui/SkeletonBlock/index.ts deleted file mode 100644 index 97e46a632..000000000 --- a/src/shared/ui/SkeletonBlock/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { SkeletonBlock } from './SkeletonBlock'; diff --git a/src/widgets/Profile/InfoBlock/index.ts b/src/widgets/Profile/InfoBlock/index.ts index f2ea76b99..bc2a686ce 100644 --- a/src/widgets/Profile/InfoBlock/index.ts +++ b/src/widgets/Profile/InfoBlock/index.ts @@ -1,4 +1,6 @@ export { InfoBlockSkeleton } from './ui/InfoBlock/InfoBlock.skeleton'; export { InfoBlock } from './ui/InfoBlock/InfoBlock'; export { InfoBlockHeader } from './ui/InfoBlockHeader/InfoBlockHeader'; +export { InfoBlockHeaderSkeleton } from './ui/InfoBlockHeader/InfoBlockHeader.skeleton'; export { InfoBlockText } from './ui/InfoBlockText/InfoBlockText'; +export { InfoBlockTextSkeleton } from './ui/InfoBlockText/InfoBlockText.skeleton'; diff --git a/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.module.css b/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.module.css index 878559fc6..aaef5f5fd 100644 --- a/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.module.css +++ b/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.module.css @@ -7,4 +7,10 @@ .container { height: auto; +} + +.card-skeleton { + gap: 0; + padding: 24px; + height: auto; } \ No newline at end of file diff --git a/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx b/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx index 6ed6197ec..7c37f7402 100644 --- a/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx +++ b/src/widgets/Profile/InfoBlock/ui/InfoBlock/InfoBlock.skeleton.tsx @@ -1,15 +1,15 @@ -import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; -import { SkeletonBlock } from '@/shared/ui/SkeletonBlock'; +import { Card } from '@/shared/ui/Card'; + +import { InfoBlockHeaderSkeleton } from '../InfoBlockHeader/InfoBlockHeader.skeleton'; +import { InfoBlockTextSkeleton } from '../InfoBlockText/InfoBlockText.skeleton'; + +import styles from './InfoBlock.module.css'; export const InfoBlockSkeleton = () => { return ( - - - {[...Array(6)].map((_, index) => ( - - ))} - - + + + + ); }; diff --git a/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.module.css b/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.module.css index 0f35af5f1..fb993e573 100644 --- a/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.module.css +++ b/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.module.css @@ -10,7 +10,6 @@ font-size: var(--font-size-h-xs); } -.info-edit { - cursor: pointer; - font-size: var(--font-size-p-s); -} +.header-card-skeleton { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.skeleton.tsx b/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.skeleton.tsx new file mode 100644 index 000000000..63615149d --- /dev/null +++ b/src/widgets/Profile/InfoBlock/ui/InfoBlockHeader/InfoBlockHeader.skeleton.tsx @@ -0,0 +1,17 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +import { UserEditButtonSkeleton } from '@/entities/user'; + +import styles from './InfoBlockHeader.module.css'; + +export const InfoBlockHeaderSkeleton = () => { + return ( +
+ + + + +
+ ); +}; diff --git a/src/widgets/Profile/InfoBlock/ui/InfoBlockText/InfoBlockText.skeleton.tsx b/src/widgets/Profile/InfoBlock/ui/InfoBlockText/InfoBlockText.skeleton.tsx new file mode 100644 index 000000000..4f3110984 --- /dev/null +++ b/src/widgets/Profile/InfoBlock/ui/InfoBlockText/InfoBlockText.skeleton.tsx @@ -0,0 +1,12 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +export const InfoBlockTextSkeleton = () => { + return ( + + {[...Array(6)].map((_, index) => ( + + ))} + + ); +}; diff --git a/src/widgets/Profile/SkillsBlock/index.ts b/src/widgets/Profile/SkillsBlock/index.ts index cb346164f..04c18cca0 100644 --- a/src/widgets/Profile/SkillsBlock/index.ts +++ b/src/widgets/Profile/SkillsBlock/index.ts @@ -1,5 +1,7 @@ export { SkillsBlockSkeleton } from './ui/SkillsBlock/SkillsBlock.skeleton'; export { SkillsBlock } from './ui/SkillsBlock/SkillsBlock'; export { SkillsBlockList } from './ui/SkillsBlockList/SkillsBlockList'; +export { SkillsBlockListSkeleton } from './ui/SkillsBlockList/SkillsBlockList.skeleton'; export { SkillsBlockItem } from './ui/SkillsBlockItem/SkillsBlockItem'; export { SkillsBlockHeader } from './ui/SkillsBlockHeader/SkillsBlockHeader'; +export { SkillsBlockHeaderSkeleton } from './ui/SkillsBlockHeader/SkillsBlockHeader.skeleton'; diff --git a/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.module.css b/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.module.css index 7c8c7d387..22bbc57a5 100644 --- a/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.module.css +++ b/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.module.css @@ -3,4 +3,10 @@ flex-direction: column; gap: 20px; width: 100%; +} + +.card-skeleton { + gap: 0; + padding: 24px; + height: auto; } \ No newline at end of file diff --git a/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx b/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx index b3d455e5d..3977a72cb 100644 --- a/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx +++ b/src/widgets/Profile/SkillsBlock/ui/SkillsBlock/SkillsBlock.skeleton.tsx @@ -1,17 +1,15 @@ -import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; -import { SkeletonBlock } from '@/shared/ui/SkeletonBlock'; +import { Card } from '@/shared/ui/Card'; + +import { SkillsBlockHeaderSkeleton } from '../SkillsBlockHeader/SkillsBlockHeader.skeleton'; +import { SkillsBlockListSkeleton } from '../SkillsBlockList/SkillsBlockList.skeleton'; + +import styles from './SkillsBlock.module.css'; export const SkillsBlockSkeleton = () => { return ( - - - {[...Array(8)].map((_, index) => ( - - - - ))} - - + + + + ); }; diff --git a/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.module.css b/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.module.css index 738f8deaa..6e72ceae8 100644 --- a/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.module.css +++ b/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.module.css @@ -9,7 +9,6 @@ font-size: var(--font-size-h-xs); } -.skills-edit { - cursor: pointer; - font-size: var(--font-size-p-s); +.header-card-skeleton { + margin-bottom: 20px; } \ No newline at end of file diff --git a/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.skeleton.tsx b/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.skeleton.tsx new file mode 100644 index 000000000..392b23738 --- /dev/null +++ b/src/widgets/Profile/SkillsBlock/ui/SkillsBlockHeader/SkillsBlockHeader.skeleton.tsx @@ -0,0 +1,17 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +import { UserEditButtonSkeleton } from '@/entities/user'; + +import styles from './SkillsBlockHeader.module.css'; + +export const SkillsBlockHeaderSkeleton = () => { + return ( +
+ + + + +
+ ); +}; diff --git a/src/widgets/Profile/SkillsBlock/ui/SkillsBlockList/SkillsBlockList.skeleton.tsx b/src/widgets/Profile/SkillsBlock/ui/SkillsBlockList/SkillsBlockList.skeleton.tsx new file mode 100644 index 000000000..66804db2a --- /dev/null +++ b/src/widgets/Profile/SkillsBlock/ui/SkillsBlockList/SkillsBlockList.skeleton.tsx @@ -0,0 +1,14 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +export const SkillsBlockListSkeleton = () => { + return ( + + {[...Array(8)].map((_, index) => ( + + + + ))} + + ); +}; diff --git a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css index 64aa21d88..34126745e 100644 --- a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css +++ b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.module.css @@ -14,29 +14,15 @@ .profile-card-skeleton { gap: 0; - margin-bottom: 24px; padding: 16px; height: auto; } -.skeleton-link { - margin-left: auto; - width: 100px; - height: 20px; -} - .flex-profile-skeleton { display: flex; gap: 16px; } -@media (width <=1280px) { - .skeleton-link { - width: 20px; - } -} - - @media (width <= 768px) { .card { flex-direction: column; @@ -59,8 +45,4 @@ .flex-profile-skeleton { flex-direction: column; } - - .skeleton-link-profile { - order: -1; - } } \ No newline at end of file diff --git a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx index a4eb1924f..dde05a7f6 100644 --- a/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx +++ b/src/widgets/Profile/UserBlock/ui/UserBlock/UserBlock.skeleton.tsx @@ -1,6 +1,9 @@ import { Card } from '@/shared/ui/Card'; -import { Flex } from '@/shared/ui/Flex'; -import { Skeleton } from '@/shared/ui/Skeleton'; + +import { UserEditButtonSkeleton } from '@/entities/user'; + +import { UserImageBlockSkeleton } from '../UserImageBlock'; +import { UserInfoBlockSkeleton } from '../UserInfoBlock'; import styles from './UserBlock.module.css'; @@ -8,50 +11,9 @@ export const UserBlockSkeleton = () => { return (
- - - - - - - - - - - - - - {[...Array(4)].map((_, index) => ( - - - - ))} - - - {[...Array(2)].map((_, index) => ( - - - - ))} - - - {[...Array(6)].map((_, index) => ( - - - - ))} - - -
-
- -
-
+ + +
); diff --git a/src/widgets/Profile/UserBlock/ui/UserImageBlock/UserImageBlock.skeleton.tsx b/src/widgets/Profile/UserBlock/ui/UserImageBlock/UserImageBlock.skeleton.tsx new file mode 100644 index 000000000..c49a451bf --- /dev/null +++ b/src/widgets/Profile/UserBlock/ui/UserImageBlock/UserImageBlock.skeleton.tsx @@ -0,0 +1,14 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +export const UserImageBlockSkeleton = () => { + return ( + + + + + + + + ); +}; diff --git a/src/widgets/Profile/UserBlock/ui/UserImageBlock/index.ts b/src/widgets/Profile/UserBlock/ui/UserImageBlock/index.ts index 548712366..498b8068e 100644 --- a/src/widgets/Profile/UserBlock/ui/UserImageBlock/index.ts +++ b/src/widgets/Profile/UserBlock/ui/UserImageBlock/index.ts @@ -1 +1,2 @@ +export { UserImageBlockSkeleton } from './UserImageBlock.skeleton'; export { UserImageBlock } from './UserImageBlock'; diff --git a/src/widgets/Profile/UserBlock/ui/UserInfoBlock/UserInfoBlock.skeleton.tsx b/src/widgets/Profile/UserBlock/ui/UserInfoBlock/UserInfoBlock.skeleton.tsx new file mode 100644 index 000000000..177b80cf3 --- /dev/null +++ b/src/widgets/Profile/UserBlock/ui/UserInfoBlock/UserInfoBlock.skeleton.tsx @@ -0,0 +1,34 @@ +import { Flex } from '@/shared/ui/Flex'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +export const UserInfoBlockSkeleton = () => { + return ( + + + + + + + {[...Array(4)].map((_, index) => ( + + + + ))} + + + {[...Array(2)].map((_, index) => ( + + + + ))} + + + {[...Array(6)].map((_, index) => ( + + + + ))} + + + ); +}; diff --git a/src/widgets/Profile/UserBlock/ui/UserInfoBlock/index.ts b/src/widgets/Profile/UserBlock/ui/UserInfoBlock/index.ts index f02d5d634..ac566c338 100644 --- a/src/widgets/Profile/UserBlock/ui/UserInfoBlock/index.ts +++ b/src/widgets/Profile/UserBlock/ui/UserInfoBlock/index.ts @@ -1 +1,2 @@ +export { UserInfoBlockSkeleton } from './UserInfoBlock.skeleton'; export { UserInfoBlock } from './UserInfoBlock';