YH-2106: add skeleton for SpecializationDetailPage

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';

src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+
+import { CardSkeleton } from '@/shared/ui/Card';
+import { Flex } from '@/shared/ui/Flex';
+import { ImageWithWrapperSkeleton } from '@/shared/ui/ImageWithWrapper';
+import { Skeleton } from '@/shared/ui/Skeleton';
+
+import styles from './SpecializationCard.module.css';
+
+export const SpecializationCardSkeleton = () => {
+	return (
+		<Flex>
+			<Flex direction="column" gap="24" style={{ flex: '0 1 740px' }}>
+				<CardSkeleton withOutsideShadow>
+					<Flex gap="16">
+						<div className={classNames(styles['title-img-block'])}>
+							<ImageWithWrapperSkeleton className={classNames(styles['title-img-block-image'])} />
+						</div>
+						<Flex maxWidth direction="column">
+							<Skeleton width="100%" height={32} />
+						</Flex>
+					</Flex>
+				</CardSkeleton>
+				<CardSkeleton withOutsideShadow>
+					<Skeleton height={32} style={{ marginBottom: '8px' }} />
+					<Skeleton height={44} />
+				</CardSkeleton>
+			</Flex>
+		</Flex>
+	);
+};

src/features/company/deleteCompany/index.ts

@@ -1,4 +1,5 @@
 export { DeleteCompanyButton } from './ui/DeleteCompanyButton/DeleteCompanyButton';
+export { DeleteCompanyButtonSkeleton } from './ui/DeleteCompanyButton/DeleteCompanyButton.skeleton';
 import { deleteCompanyMock } from './api/__mock__/deleteCompany';
 
 export const deleteCompanyHandlers = [deleteCompanyMock];

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<DeleteCompanyButtonProps>) => {
+	return <DeleteButtonSkeleton isDetailPage={isDetailPage} />;
+};

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;

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<DeleteQuestionButtonProps>) => {
-	return (
-		<ButtonSkeleton
-			width={120}
-			aria-label="Large"
-			style={{ width: 'auto', justifyContent: isDetailPage ? 'center' : 'flex-start' }}
-			variant={isDetailPage ? 'destructive' : 'tertiary'}
-		/>
-	);
+	return <DeleteButtonSkeleton isDetailPage={isDetailPage} />;
 };

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__';

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<DeleteSpecializationButtonProps>) => {
+	return <DeleteButtonSkeleton isDetailPage={isDetailPage} />;
+};

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;
 }

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 (
 		<>
 			<BackHeaderSkeleton>
-				<DeleteQuestionButtonSkeleton isDetailPage />
+				<DeleteCompanyButtonSkeleton isDetailPage />
 				<ButtonSkeleton width={180} />
 			</BackHeaderSkeleton>
 			<CompanyCardSkeleton />

src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx

@@ -0,0 +1,22 @@
+import { BackButtonSkeleton } from '@/shared/ui/BackButton';
+import { ButtonSkeleton } from '@/shared/ui/Button';
+import { Flex } from '@/shared/ui/Flex';
+
+import { SpecializationCardSkeleton } from '@/entities/specialization';
+
+import { DeleteSpecializationButtonSkeleton } from '@/features/specialization/deleteSpecialization';
+
+export const SpecializationDetailPageSkeleton = () => {
+	return (
+		<>
+			<Flex align="center" gap="8" style={{ marginBottom: 24 }}>
+				<BackButtonSkeleton />
+				<Flex style={{ marginLeft: 'auto', gap: '16px' }}>
+					<DeleteSpecializationButtonSkeleton isDetailPage />
+					<ButtonSkeleton width={180} style={{ marginLeft: 'auto' }} />
+				</Flex>
+			</Flex>
+			<SpecializationCardSkeleton />
+		</>
+	);
+};

src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx

@@ -6,14 +6,15 @@ 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 = () => {
 	const { t } = useTranslation(i18Namespace.translation);
 	const { specializationId } = useParams<{ specializationId: string }>();
@@ -63,7 +64,7 @@ const SpecializationDetailPage = () => {
 		<>
 			<PageWrapper
 				isLoading={isLoading}
-				skeleton={<Loader />}
+				skeleton={<SpecializationDetailPageSkeleton />}
 				hasError={isError}
 				hasData={hasData}
 				stubs={stubs}

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<DeleteButtonProps>) => {
+	return (
+		<ButtonSkeleton
+			width={120}
+			aria-label="Large"
+			style={{ width: 'auto', justifyContent: isDetailPage ? 'center' : 'flex-start' }}
+			variant={isDetailPage ? 'destructive' : 'tertiary'}
+		/>
+	);
+};

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;

src/shared/ui/DeleteButton/index.ts

@@ -1 +1,2 @@
 export { DeleteButton } from './DeleteButton';
+export { DeleteButtonSkeleton } from './DeleteButton.skeleton';