From ddfa8245795b80605df4756f2948a965a9a4a409 Mon Sep 17 00:00:00 2001 From: Ivan Ivashov Date: Sun, 14 Jun 2026 21:25:23 +0300 Subject: [PATCH 1/4] YH-2106: add skeleton for SpecializationDetailPage --- .../SpecializationDetailPage.module.css | 6 ++++++ .../SpecializationDetailPage.skeleton.tsx | 19 +++++++++++++++++++ .../SpecializationDetailPage.tsx | 3 ++- .../ui/PageWrapper/PageWrapper.tsx | 2 +- 4 files changed, 28 insertions(+), 2 deletions(-) create mode 100644 src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css create mode 100644 src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css new file mode 100644 index 000000000..7f992438e --- /dev/null +++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css @@ -0,0 +1,6 @@ +.specializationDetailSkeleton { + padding: 24px; + display: flex; + flex-direction: column; + gap: 24px; +} diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx new file mode 100644 index 000000000..67841b2c2 --- /dev/null +++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx @@ -0,0 +1,19 @@ +import { BackHeaderSkeleton } from '@/shared/ui/BackHeader'; +import { ButtonSkeleton } from '@/shared/ui/Button'; +import { Skeleton } from '@/shared/ui/Skeleton'; +import style from './SpecializationDetailPage.module.css'; + +export const SpecializationDetailPageSkeleton = () => { + return ( + <> + + + + +
+ + +
+ + ); +}; diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx index 749179ff9..94e9ef42c 100644 --- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx +++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx @@ -13,6 +13,7 @@ import { useGetSpecializationByIdQuery, SpecializationCard } from '@/entities/sp import { DeleteSpecializationButton } from '@/features/specialization/deleteSpecialization'; import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper'; +import { SpecializationDetailPageSkeleton } from './SpecializationDetailPage.skeleton'; const SpecializationDetailPage = () => { const { t } = useTranslation(i18Namespace.translation); @@ -63,7 +64,7 @@ const SpecializationDetailPage = () => { <> } + skeleton={} hasError={isError} hasData={hasData} stubs={stubs} diff --git a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx index 5d3ad8294..457f55786 100644 --- a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx +++ b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx @@ -87,7 +87,7 @@ export const PageWrapper = ({ }; if (isLoading) { - return skeleton || ; + return skeleton || ; } if (roles && !hasPermission) { From 741996dcc6c92919a6757052243e072616ca458b Mon Sep 17 00:00:00 2001 From: Ivan Ivashov Date: Tue, 16 Jun 2026 21:56:44 +0300 Subject: [PATCH 2/4] message --- src/entities/specialization/index.ts | 1 + .../SpecializationCard.skeleton.tsx | 30 +++++++++++++++++++ .../SpecializationDetailPage.skeleton.tsx | 29 +++++++++++------- 3 files changed, 49 insertions(+), 11 deletions(-) create mode 100644 src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx diff --git a/src/entities/specialization/index.ts b/src/entities/specialization/index.ts index e4954dd39..76d554ddc 100644 --- a/src/entities/specialization/index.ts +++ b/src/entities/specialization/index.ts @@ -9,6 +9,7 @@ export { useGetSpecializationsGeneralProgressQuery, } from './api/specializationApi'; export { SpecializationCard } from './ui/SpecializationCard/SpecializationCard'; +export { SpecializationCardSkeleton} from './ui/SpecializationCard/SpecializationCard.skeleton'; export { SpecializationForm } from './ui/SpecializationForm/SpecializationForm'; export { SpecializationSelect } from './ui/SpecializationSelect/SpecializationSelect'; export { SpecializationSelectSkeleton } from './ui/SpecializationSelect/SpecializationSelect.skeleton'; diff --git a/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx b/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx new file mode 100644 index 000000000..aedb896df --- /dev/null +++ b/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx @@ -0,0 +1,30 @@ +import classNames from 'classnames'; + +import { CardSkeleton } from '@/shared/ui/Card'; +import { Flex } from '@/shared/ui/Flex'; +import styles from './SpecializationCard.module.css'; +import { ImageWithWrapperSkeleton } from '@/shared/ui/ImageWithWrapper'; +import { Skeleton } from '@/shared/ui/Skeleton'; + +export function SpecializationCardSkeleton() { + return ( + + + + +
+ +
+ + + +
+
+ + + + +
+
+ ); +} diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx index 67841b2c2..40034dc73 100644 --- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx +++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx @@ -1,19 +1,26 @@ -import { BackHeaderSkeleton } from '@/shared/ui/BackHeader'; import { ButtonSkeleton } from '@/shared/ui/Button'; -import { Skeleton } from '@/shared/ui/Skeleton'; -import style from './SpecializationDetailPage.module.css'; +import { Flex } from '@/shared/ui/Flex'; +import { BackButtonSkeleton } from '@/shared/ui/BackButton'; +import { SpecializationCardSkeleton } from '@/entities/specialization'; export const SpecializationDetailPageSkeleton = () => { return ( <> - - - - -
- - -
+ + + + + + + + ); }; From 88b80232728da4d420bb1482869f74f04e7ca433 Mon Sep 17 00:00:00 2001 From: Denis Pereloma Date: Mon, 29 Jun 2026 17:08:27 +0300 Subject: [PATCH 3/4] YH-2106: fix --- .../SpecializationCard.skeleton.tsx | 9 +++++---- src/features/company/deleteCompany/index.ts | 1 + .../DeleteCompanyButton.skeleton.tsx | 9 +++++++++ .../DeleteCompanyButton/DeleteCompanyButton.tsx | 2 +- .../DeleteQuestionButton.skeleton.tsx | 11 ++--------- .../specialization/deleteSpecialization/index.ts | 1 + .../DeleteSpecializationButton.skeleton.tsx | 9 +++++++++ .../DeleteSpecializationButton.tsx | 2 +- .../CompanyDetailPageContent.skeleton.tsx | 4 ++-- .../SpecializationDetailPage.module.css | 6 ------ .../SpecializationDetailPage.skeleton.tsx | 16 ++++++---------- .../SpecializationDetailPage.tsx | 3 ++- .../ui/DeleteButton/DeleteButton.skeleton.tsx | 14 ++++++++++++++ src/shared/ui/DeleteButton/DeleteButton.tsx | 2 +- src/shared/ui/DeleteButton/index.ts | 1 + 15 files changed, 55 insertions(+), 35 deletions(-) create mode 100644 src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.skeleton.tsx create mode 100644 src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.skeleton.tsx delete mode 100644 src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css create mode 100644 src/shared/ui/DeleteButton/DeleteButton.skeleton.tsx diff --git a/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx b/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx index aedb896df..ea77b091c 100644 --- a/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx +++ b/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx @@ -2,11 +2,12 @@ import classNames from 'classnames'; import { CardSkeleton } from '@/shared/ui/Card'; import { Flex } from '@/shared/ui/Flex'; -import styles from './SpecializationCard.module.css'; import { ImageWithWrapperSkeleton } from '@/shared/ui/ImageWithWrapper'; import { Skeleton } from '@/shared/ui/Skeleton'; -export function SpecializationCardSkeleton() { +import styles from './SpecializationCard.module.css'; + +export const SpecializationCardSkeleton = () => { return ( @@ -16,7 +17,7 @@ export function SpecializationCardSkeleton() { - + @@ -27,4 +28,4 @@ export function SpecializationCardSkeleton() { ); -} +}; diff --git a/src/features/company/deleteCompany/index.ts b/src/features/company/deleteCompany/index.ts index 8dab882d7..b825bc63c 100644 --- a/src/features/company/deleteCompany/index.ts +++ b/src/features/company/deleteCompany/index.ts @@ -1 +1,2 @@ export { DeleteCompanyButton } from './ui/DeleteCompanyButton/DeleteCompanyButton'; +export { DeleteCompanyButtonSkeleton } from './ui/DeleteCompanyButton/DeleteCompanyButton.skeleton'; diff --git a/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.skeleton.tsx b/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.skeleton.tsx new file mode 100644 index 000000000..37efa89ab --- /dev/null +++ b/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.skeleton.tsx @@ -0,0 +1,9 @@ +import { DeleteButtonSkeleton } from '@/shared/ui/DeleteButton'; + +import { DeleteCompanyButtonProps } from './DeleteCompanyButton'; + +export const DeleteCompanyButtonSkeleton = ({ + isDetailPage = false, +}: Partial) => { + return ; +}; diff --git a/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.tsx b/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.tsx index aea521619..2b0af4384 100644 --- a/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.tsx +++ b/src/features/company/deleteCompany/ui/DeleteCompanyButton/DeleteCompanyButton.tsx @@ -5,7 +5,7 @@ import { Company } from '@/entities/company'; import { useDeleteCompanyMutation } from '../../api/deleteCompanyApi'; -interface DeleteCompanyButtonProps { +export interface DeleteCompanyButtonProps { companyId: Company['id']; isDetailPage?: boolean; disabled?: boolean; diff --git a/src/features/question/deleteQuestion/ui/DeleteQuestionButton/DeleteQuestionButton.skeleton.tsx b/src/features/question/deleteQuestion/ui/DeleteQuestionButton/DeleteQuestionButton.skeleton.tsx index 1879e3f90..e8e0ab128 100644 --- a/src/features/question/deleteQuestion/ui/DeleteQuestionButton/DeleteQuestionButton.skeleton.tsx +++ b/src/features/question/deleteQuestion/ui/DeleteQuestionButton/DeleteQuestionButton.skeleton.tsx @@ -1,16 +1,9 @@ -import { ButtonSkeleton } from '@/shared/ui/Button'; +import { DeleteButtonSkeleton } from '@/shared/ui/DeleteButton'; import { DeleteQuestionButtonProps } from './DeleteQuestionButton'; export const DeleteQuestionButtonSkeleton = ({ isDetailPage = false, }: Partial) => { - return ( - - ); + return ; }; diff --git a/src/features/specialization/deleteSpecialization/index.ts b/src/features/specialization/deleteSpecialization/index.ts index 6fbf72c6d..bb7b91514 100644 --- a/src/features/specialization/deleteSpecialization/index.ts +++ b/src/features/specialization/deleteSpecialization/index.ts @@ -1,3 +1,4 @@ export { DeleteSpecializationButton } from './ui/DeleteSpecializationButton/DeleteSpecializationButton'; +export { DeleteSpecializationButtonSkeleton } from './ui/DeleteSpecializationButton/DeleteSpecializationButton.skeleton'; export { specializationDeleteHandlers } from './api/__mocks__'; diff --git a/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.skeleton.tsx b/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.skeleton.tsx new file mode 100644 index 000000000..fbc9f0cf0 --- /dev/null +++ b/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.skeleton.tsx @@ -0,0 +1,9 @@ +import { DeleteButtonSkeleton } from '@/shared/ui/DeleteButton'; + +import { DeleteSpecializationButtonProps } from './DeleteSpecializationButton'; + +export const DeleteSpecializationButtonSkeleton = ({ + isDetailPage, +}: Partial) => { + return ; +}; diff --git a/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.tsx b/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.tsx index 2e957fe2f..bd95093a9 100644 --- a/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.tsx +++ b/src/features/specialization/deleteSpecialization/ui/DeleteSpecializationButton/DeleteSpecializationButton.tsx @@ -4,7 +4,7 @@ import { Specialization } from '@/entities/specialization'; import { useDeleteSpecializationMutation } from '../../api/deleteSpecializationApi'; -interface DeleteSpecializationButtonProps { +export interface DeleteSpecializationButtonProps { specializationId: Specialization['id']; isDetailPage?: boolean; } diff --git a/src/pages/admin/company/companyDetail/ui/CompanyDetailPageContent/CompanyDetailPageContent.skeleton.tsx b/src/pages/admin/company/companyDetail/ui/CompanyDetailPageContent/CompanyDetailPageContent.skeleton.tsx index c0895fe15..1c254f1c6 100644 --- a/src/pages/admin/company/companyDetail/ui/CompanyDetailPageContent/CompanyDetailPageContent.skeleton.tsx +++ b/src/pages/admin/company/companyDetail/ui/CompanyDetailPageContent/CompanyDetailPageContent.skeleton.tsx @@ -3,13 +3,13 @@ import { ButtonSkeleton } from '@/shared/ui/Button'; import { CompanyCardSkeleton } from '@/entities/company'; -import { DeleteQuestionButtonSkeleton } from '@/features/question/deleteQuestion'; +import { DeleteCompanyButtonSkeleton } from '@/features/company/deleteCompany'; export const CompanyDetailPageSkeleton = () => { return ( <> - + diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css deleted file mode 100644 index 7f992438e..000000000 --- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.specializationDetailSkeleton { - padding: 24px; - display: flex; - flex-direction: column; - gap: 24px; -} diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx index 40034dc73..3deb732d9 100644 --- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx +++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx @@ -1,23 +1,19 @@ +import { BackButtonSkeleton } from '@/shared/ui/BackButton'; import { ButtonSkeleton } from '@/shared/ui/Button'; import { Flex } from '@/shared/ui/Flex'; -import { BackButtonSkeleton } from '@/shared/ui/BackButton'; + import { SpecializationCardSkeleton } from '@/entities/specialization'; +import { DeleteSpecializationButtonSkeleton } from '@/features/specialization/deleteSpecialization'; + export const SpecializationDetailPageSkeleton = () => { return ( <> - - + + diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx index 94e9ef42c..d0acb4212 100644 --- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx +++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx @@ -6,13 +6,13 @@ import { route } from '@/shared/libs'; import { BackButton } from '@/shared/ui/BackButton'; import { Button } from '@/shared/ui/Button'; import { Flex } from '@/shared/ui/Flex'; -import { Loader } from '@/shared/ui/Loader'; import { useGetSpecializationByIdQuery, SpecializationCard } from '@/entities/specialization'; import { DeleteSpecializationButton } from '@/features/specialization/deleteSpecialization'; import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper'; + import { SpecializationDetailPageSkeleton } from './SpecializationDetailPage.skeleton'; const SpecializationDetailPage = () => { @@ -44,6 +44,7 @@ const SpecializationDetailPage = () => { + ); }; diff --git a/src/shared/ui/DeleteButton/DeleteButton.skeleton.tsx b/src/shared/ui/DeleteButton/DeleteButton.skeleton.tsx new file mode 100644 index 000000000..27da5730a --- /dev/null +++ b/src/shared/ui/DeleteButton/DeleteButton.skeleton.tsx @@ -0,0 +1,14 @@ +import { ButtonSkeleton } from '@/shared/ui/Button'; + +import { DeleteButtonProps } from './DeleteButton'; + +export const DeleteButtonSkeleton = ({ isDetailPage }: Partial) => { + return ( + + ); +}; diff --git a/src/shared/ui/DeleteButton/DeleteButton.tsx b/src/shared/ui/DeleteButton/DeleteButton.tsx index a4dfaac7d..94fa6d21a 100644 --- a/src/shared/ui/DeleteButton/DeleteButton.tsx +++ b/src/shared/ui/DeleteButton/DeleteButton.tsx @@ -7,7 +7,7 @@ import { Button } from '@/shared/ui/Button'; import { Icon } from '@/shared/ui/Icon'; import { Tooltip } from '@/shared/ui/Tooltip'; -interface DeleteButtonProps { +export interface DeleteButtonProps { onDelete: () => void; isDetailPage?: boolean; disabled?: boolean; diff --git a/src/shared/ui/DeleteButton/index.ts b/src/shared/ui/DeleteButton/index.ts index 45cf4a7bf..86c21c8e1 100644 --- a/src/shared/ui/DeleteButton/index.ts +++ b/src/shared/ui/DeleteButton/index.ts @@ -1 +1,2 @@ export { DeleteButton } from './DeleteButton'; +export { DeleteButtonSkeleton } from './DeleteButton.skeleton'; From e3c2a11e56d1fab80319077ac4eaba3bfeceb32a Mon Sep 17 00:00:00 2001 From: Denis Pereloma Date: Mon, 29 Jun 2026 17:10:47 +0300 Subject: [PATCH 4/4] YH-2106: fix --- src/entities/specialization/index.ts | 2 +- src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/entities/specialization/index.ts b/src/entities/specialization/index.ts index 76d554ddc..c8dce3241 100644 --- a/src/entities/specialization/index.ts +++ b/src/entities/specialization/index.ts @@ -9,7 +9,7 @@ export { useGetSpecializationsGeneralProgressQuery, } from './api/specializationApi'; export { SpecializationCard } from './ui/SpecializationCard/SpecializationCard'; -export { SpecializationCardSkeleton} from './ui/SpecializationCard/SpecializationCard.skeleton'; +export { SpecializationCardSkeleton } from './ui/SpecializationCard/SpecializationCard.skeleton'; export { SpecializationForm } from './ui/SpecializationForm/SpecializationForm'; export { SpecializationSelect } from './ui/SpecializationSelect/SpecializationSelect'; export { SpecializationSelectSkeleton } from './ui/SpecializationSelect/SpecializationSelect.skeleton'; diff --git a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx index 457f55786..5d3ad8294 100644 --- a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx +++ b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx @@ -87,7 +87,7 @@ export const PageWrapper = ({ }; if (isLoading) { - return skeleton || ; + return skeleton || ; } if (roles && !hasPermission) {