From bf453a6d95b11c62960bb000cc8225ef21e88559 Mon Sep 17 00:00:00 2001
From: Ivan Ivashov <IvashovIA@ya.ru>
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 (
+		<>
+			<BackHeaderSkeleton>
+				<ButtonSkeleton width={130} />
+				<ButtonSkeleton width={130} />
+			</BackHeaderSkeleton>
+			<div className={style.specializationDetailSkeleton}>
+				<Skeleton width={740} height={160} borderRadius={16} />
+				<Skeleton width={740} height={133} borderRadius={16} />
+			</div>
+		</>
+	);
+};
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 = () => {
 		<>
 			<PageWrapper
 				isLoading={isLoading}
-				skeleton={<Loader />}
+				skeleton={<SpecializationDetailPageSkeleton />}
 				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 || <Loader />;
+		return skeleton || <Loader />; 
 	}
 
 	if (roles && !hasPermission) {

From d924b281b80dcede247e74fbdee07bfb877ebffc Mon Sep 17 00:00:00 2001
From: Denis Pereloma <den.pereloma@gmail.com>
Date: Mon, 29 Jun 2026 17:57:41 +0300
Subject: [PATCH 2/4] YH-2106: fix

---
 src/entities/specialization/index.ts          |  1 +
 .../SpecializationCard.skeleton.tsx           | 31 +++++++++++++++++++
 .../SpecializationDetailPage.module.css       |  6 ----
 .../SpecializationDetailPage.skeleton.tsx     | 30 +++++++++++-------
 .../SpecializationDetailPage.tsx              |  2 +-
 5 files changed, 52 insertions(+), 18 deletions(-)
 create mode 100644 src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx
 delete mode 100644 src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.module.css

diff --git a/src/entities/specialization/index.ts b/src/entities/specialization/index.ts
index e4954dd39..c8dce3241 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..a8999f644
--- /dev/null
+++ b/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 />
+						</Flex>
+					</Flex>
+				</CardSkeleton>
+				<CardSkeleton withOutsideShadow>
+					<Skeleton height={32} style={{ marginBottom: '8px' }} />
+					<Skeleton height={44} />
+				</CardSkeleton>
+			</Flex>
+		</Flex>
+	);
+};
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 67841b2c2..7889f202c 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,27 @@
-import { BackHeaderSkeleton } from '@/shared/ui/BackHeader';
+import { BackButtonSkeleton } from '@/shared/ui/BackButton';
 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 { SpecializationCardSkeleton } from '@/entities/specialization';
 
 export const SpecializationDetailPageSkeleton = () => {
 	return (
 		<>
-			<BackHeaderSkeleton>
-				<ButtonSkeleton width={130} />
-				<ButtonSkeleton width={130} />
-			</BackHeaderSkeleton>
-			<div className={style.specializationDetailSkeleton}>
-				<Skeleton width={740} height={160} borderRadius={16} />
-				<Skeleton width={740} height={133} borderRadius={16} />
-			</div>
+			<Flex align="center" gap="8" style={{ marginBottom: 24 }}>
+				<BackButtonSkeleton />
+				<Flex style={{ marginLeft: 'auto', gap: '16px' }}>
+					<ButtonSkeleton
+						style={{
+							width: 'auto',
+							padding: '0 32px',
+							justifyContent: 'center',
+						}}
+						variant="destructive"
+					/>
+					<ButtonSkeleton style={{ marginLeft: 'auto' }} />
+				</Flex>
+			</Flex>
+			<SpecializationCardSkeleton />
 		</>
 	);
 };
diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
index 94e9ef42c..e7b9c203a 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 = () => {

From e39050ac6bea4193ad704dba579fa42a082b136c Mon Sep 17 00:00:00 2001
From: Denis Pereloma <den.pereloma@gmail.com>
Date: Mon, 29 Jun 2026 17:08:27 +0300
Subject: [PATCH 3/4] YH-2106: fix

---
 .../SpecializationCard.skeleton.tsx                |  2 +-
 src/features/company/deleteCompany/index.ts        |  1 +
 .../DeleteCompanyButton.skeleton.tsx               |  9 +++++++++
 .../ui/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.skeleton.tsx          | 13 ++++---------
 .../SpecializationDetailPage.tsx                   |  1 +
 .../ui/DeleteButton/DeleteButton.skeleton.tsx      | 14 ++++++++++++++
 src/shared/ui/DeleteButton/DeleteButton.tsx        |  2 +-
 src/shared/ui/DeleteButton/index.ts                |  1 +
 14 files changed, 48 insertions(+), 24 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
 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 a8999f644..ea77b091c 100644
--- a/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx
+++ b/src/entities/specialization/ui/SpecializationCard/SpecializationCard.skeleton.tsx
@@ -17,7 +17,7 @@ export const SpecializationCardSkeleton = () => {
 							<ImageWithWrapperSkeleton className={classNames(styles['title-img-block-image'])} />
 						</div>
 						<Flex maxWidth direction="column">
-							<Skeleton />
+							<Skeleton width="100%" height={32} />
 						</Flex>
 					</Flex>
 				</CardSkeleton>
diff --git a/src/features/company/deleteCompany/index.ts b/src/features/company/deleteCompany/index.ts
index e6fb875a1..93d32d2b8 100644
--- a/src/features/company/deleteCompany/index.ts
+++ b/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];
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<DeleteCompanyButtonProps>) => {
+	return <DeleteButtonSkeleton isDetailPage={isDetailPage} />;
+};
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<DeleteQuestionButtonProps>) => {
-	return (
-		<ButtonSkeleton
-			width={120}
-			aria-label="Large"
-			style={{ width: 'auto', justifyContent: isDetailPage ? 'center' : 'flex-start' }}
-			variant={isDetailPage ? 'destructive' : 'tertiary'}
-		/>
-	);
+	return <DeleteButtonSkeleton isDetailPage={isDetailPage} />;
 };
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<DeleteSpecializationButtonProps>) => {
+	return <DeleteButtonSkeleton isDetailPage={isDetailPage} />;
+};
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 (
 		<>
 			<BackHeaderSkeleton>
-				<DeleteQuestionButtonSkeleton isDetailPage />
+				<DeleteCompanyButtonSkeleton isDetailPage />
 				<ButtonSkeleton width={180} />
 			</BackHeaderSkeleton>
 			<CompanyCardSkeleton />
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 7889f202c..3deb732d9 100644
--- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx
+++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.skeleton.tsx
@@ -4,21 +4,16 @@ 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' }}>
-					<ButtonSkeleton
-						style={{
-							width: 'auto',
-							padding: '0 32px',
-							justifyContent: 'center',
-						}}
-						variant="destructive"
-					/>
-					<ButtonSkeleton style={{ marginLeft: 'auto' }} />
+					<DeleteSpecializationButtonSkeleton isDetailPage />
+					<ButtonSkeleton width={180} style={{ marginLeft: 'auto' }} />
 				</Flex>
 			</Flex>
 			<SpecializationCardSkeleton />
diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
index e7b9c203a..d0acb4212 100644
--- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
+++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
@@ -44,6 +44,7 @@ const SpecializationDetailPage = () => {
 					</Flex>
 				</Flex>
 				<SpecializationCard specialization={specialization} />
+				<SpecializationDetailPageSkeleton />
 			</>
 		);
 	};
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<DeleteButtonProps>) => {
+	return (
+		<ButtonSkeleton
+			width={120}
+			aria-label="Large"
+			style={{ width: 'auto', justifyContent: isDetailPage ? 'center' : 'flex-start' }}
+			variant={isDetailPage ? 'destructive' : 'tertiary'}
+		/>
+	);
+};
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 48c0b1c7573b6b70552c9ae92345ada4d21c0ef0 Mon Sep 17 00:00:00 2001
From: Denis Pereloma <den.pereloma@gmail.com>
Date: Mon, 29 Jun 2026 18:00:49 +0300
Subject: [PATCH 4/4] YH-2106: fix

---
 .../ui/SpecializationDetailPage/SpecializationDetailPage.tsx    | 1 -
 src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx          | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
index d0acb4212..e7b9c203a 100644
--- a/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
+++ b/src/pages/admin/specialization/specializationDetail/ui/SpecializationDetailPage/SpecializationDetailPage.tsx
@@ -44,7 +44,6 @@ const SpecializationDetailPage = () => {
 					</Flex>
 				</Flex>
 				<SpecializationCard specialization={specialization} />
-				<SpecializationDetailPageSkeleton />
 			</>
 		);
 	};
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 || <Loader />; 
+		return skeleton || <Loader />;
 	}
 
 	if (roles && !hasPermission) {