From 7c7adf97d127cd168090a338c0e91f98466ffe20 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Tue, 19 May 2026 22:11:02 +0300
Subject: [PATCH 1/8] YH-1564: add analytic page template skeleton

---
 .../AnalyticPageTemplate.skeleton.tsx         | 99 +++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx

diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
new file mode 100644
index 000000000..701a3f0cc
--- /dev/null
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
@@ -0,0 +1,99 @@
+import { useScreenSize } from '@/shared/libs';
+import { Card } from '@/shared/ui/Card';
+import { CheckboxSkeleton } from '@/shared/ui/Checkbox';
+import { Flex } from '@/shared/ui/Flex';
+import { Skeleton } from '@/shared/ui/Skeleton';
+import { StatusChipSkeleton } from '@/shared/ui/StatusChip';
+import { TablePaginationSkeleton } from '@/shared/ui/TablePagination';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+import { SkillSelectSkeleton } from '@/entities/skill';
+import { SpecializationSelectSkeleton } from '@/entities/specialization';
+
+import { AnalyticPageTemplateMobileListSkeleton } from '../AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton';
+
+import styles from './AnalyticPageTemplate.module.css';
+
+interface AnalyticPageTemplateSkeletonProps {
+	rowsCount?: number;
+	fieldsCount?: number;
+	withChips?: boolean;
+	withImage?: boolean;
+	withSkillFilter?: boolean;
+}
+
+export const AnalyticPageTemplateSkeleton = ({
+	rowsCount = 10,
+	fieldsCount = 1,
+	withChips = false,
+	withImage = false,
+	withSkillFilter = false,
+}: AnalyticPageTemplateSkeletonProps) => {
+	const { isMobile } = useScreenSize();
+
+	return (
+		<Card>
+			<Flex className={styles.header} justify="between">
+				<TextSkeleton variant="body6" width={400} />
+				<Skeleton width={20} height={20} borderRadius="50%" />
+			</Flex>
+
+			<Flex gap="14" wrap="wrap" className={styles['dropdown-container']}>
+				<SpecializationSelectSkeleton />
+				{withSkillFilter && <SkillSelectSkeleton />}
+			</Flex>
+
+			{isMobile ? (
+				<AnalyticPageTemplateMobileListSkeleton
+					withChips={withChips}
+					withImage={withImage}
+					fieldsCount={fieldsCount}
+				/>
+			) : (
+				<table>
+					<thead>
+						<tr>
+							<td style={{ width: '50px' }}>
+								<CheckboxSkeleton />
+							</td>
+							<td>
+								<TextSkeleton variant="body5" width="30vw" />
+							</td>
+							{Array.from({ length: fieldsCount }).map((_, idx) => (
+								<td key={idx} style={{ width: '120px' }}>
+									<TextSkeleton variant="body5" width="120px" />
+								</td>
+							))}
+						</tr>
+					</thead>
+					<tbody>
+						{Array.from({ length: rowsCount }).map((_, idx) => (
+							<tr key={idx}>
+								<td>
+									<CheckboxSkeleton />
+								</td>
+								<td>
+									<Flex direction="column" gap="4">
+										<TextSkeleton variant="body3-accent" width="30vw" />
+										{withChips && (
+											<Flex>
+												<StatusChipSkeleton />
+											</Flex>
+										)}
+									</Flex>
+								</td>
+								{Array.from({ length: fieldsCount }).map((_, idx) => (
+									<td key={idx} style={{ width: '120px' }}>
+										<TextSkeleton variant="body3-accent" width="120px" />
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			)}
+
+			<TablePaginationSkeleton />
+		</Card>
+	);
+};

From 56dfaed3a275f24a266b42513ece9d26ad00d6a3 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Tue, 19 May 2026 22:18:11 +0300
Subject: [PATCH 2/8] YH-1564: add analytic page template mobile list skeleton
 and update index

---
 .../analytics/AnalyticPageTemplate/index.ts   |  2 +
 ...nalyticPageTemplateMobileList.skeleton.tsx | 41 +++++++++++++++++++
 2 files changed, 43 insertions(+)
 create mode 100644 src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx

diff --git a/src/widgets/analytics/AnalyticPageTemplate/index.ts b/src/widgets/analytics/AnalyticPageTemplate/index.ts
index 9d2b05e8d..618943bd5 100644
--- a/src/widgets/analytics/AnalyticPageTemplate/index.ts
+++ b/src/widgets/analytics/AnalyticPageTemplate/index.ts
@@ -1,4 +1,6 @@
 export { AnalyticPageTemplate } from './ui/AnalyticPageTemplate/AnalyticPageTemplate';
+export { AnalyticPageTemplateSkeleton } from './ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton';
 export { AnalyticPageTemplateMobileList } from './ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList';
+export { AnalyticPageTemplateMobileListSkeleton } from './ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton';
 export { useAnalyticFilters } from './model/hooks/useAnalyticFilters';
 export type { AnalyticPageTemplateMobileListItem } from './model/types/types';
diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
new file mode 100644
index 000000000..260b77815
--- /dev/null
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
@@ -0,0 +1,41 @@
+import { Card } from '@/shared/ui/Card';
+import { Flex } from '@/shared/ui/Flex';
+import { ImageWithWrapperSkeleton } from '@/shared/ui/ImageWithWrapper';
+import { StatusChipSkeleton } from '@/shared/ui/StatusChip';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+interface AnalyticPageTemplateMobileListSkeletonProps {
+	withChips?: boolean;
+	fieldsCount?: number;
+	withImage?: boolean;
+	rowsCount?: number;
+}
+
+export const AnalyticPageTemplateMobileListSkeleton = ({
+	withChips = false,
+	fieldsCount = 1,
+	rowsCount = 10,
+	withImage = false,
+}: AnalyticPageTemplateMobileListSkeletonProps) => {
+	return (
+		<Flex componentType="ul" direction="column" gap="16">
+			{Array.from({ length: rowsCount }).map((_, index) => (
+				<li key={index}>
+					<Card>
+						<Flex gap="12" direction="column">
+							{withChips && <StatusChipSkeleton />}
+							{withImage && <ImageWithWrapperSkeleton />}
+							<TextSkeleton variant="body3-accent" width="70%" />
+							{Array.from({ length: fieldsCount }).map((_, fieldIndex) => (
+								<Flex key={fieldIndex} justify="between">
+									<TextSkeleton variant="body3-accent" width="25%" />
+									<TextSkeleton variant="body3-accent" width="15%" />
+								</Flex>
+							))}
+						</Flex>
+					</Card>
+				</li>
+			))}
+		</Flex>
+	);
+};

From 859ff17cebc30b0b4457781c260803b6cdecc131 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Tue, 19 May 2026 22:24:02 +0300
Subject: [PATCH 3/8] YH-1564: add analytic template skeleton to all
 corresponding pages

---
 .../ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx   | 7 ++++++-
 .../ui/PopularQuestionsPage/PopularQuestionsPage.tsx       | 7 ++++++-
 .../ui/PopularSkillsPage/PopularSkillsPage.tsx             | 7 ++++++-
 .../ProgressSpecializationsPage.tsx                        | 7 ++++++-
 .../ui/SkillsProficiencyPage/SkillsProficiencyPage.tsx     | 7 ++++++-
 src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx     | 3 +--
 6 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx b/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx
index 6640a9562..c953b32c0 100644
--- a/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx
+++ b/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx
@@ -6,7 +6,11 @@ import { useAppSelector } from '@/shared/libs';
 import { getSpecializationId } from '@/entities/profile';
 import { useGetMostDifficultQuestionsBySpecializationIdQuery } from '@/entities/question';
 
-import { AnalyticPageTemplate, useAnalyticFilters } from '@/widgets/analytics/AnalyticPageTemplate';
+import {
+	AnalyticPageTemplate,
+	AnalyticPageTemplateSkeleton,
+	useAnalyticFilters,
+} from '@/widgets/analytics/AnalyticPageTemplate';
 import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper';
 
 import { DifficultQuestionsList } from '../DifficultQuestionsList/DifficultQuestionsList';
@@ -41,6 +45,7 @@ export const DifficultQuestionsPage = () => {
 
 	return (
 		<PageWrapper
+			skeleton={<AnalyticPageTemplateSkeleton fieldsCount={2} />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}
diff --git a/src/pages/analytics/popularQuestions/ui/PopularQuestionsPage/PopularQuestionsPage.tsx b/src/pages/analytics/popularQuestions/ui/PopularQuestionsPage/PopularQuestionsPage.tsx
index ab5d1961b..a7b016320 100644
--- a/src/pages/analytics/popularQuestions/ui/PopularQuestionsPage/PopularQuestionsPage.tsx
+++ b/src/pages/analytics/popularQuestions/ui/PopularQuestionsPage/PopularQuestionsPage.tsx
@@ -4,7 +4,11 @@ import { i18Namespace, Analytics } from '@/shared/config';
 
 import { PopularQuestionStat, useGetPopularQuestionsQuery } from '@/entities/question';
 
-import { AnalyticPageTemplate, useAnalyticFilters } from '@/widgets/analytics/AnalyticPageTemplate';
+import {
+	AnalyticPageTemplate,
+	AnalyticPageTemplateSkeleton,
+	useAnalyticFilters,
+} from '@/widgets/analytics/AnalyticPageTemplate';
 import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper';
 
 import { PopularQuestionsList } from '../PopularQuestionsList/PopularQuestionsList';
@@ -43,6 +47,7 @@ export const PopularQuestionsPage = () => {
 
 	return (
 		<PageWrapper
+			skeleton={<AnalyticPageTemplateSkeleton withImage />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}
diff --git a/src/pages/analytics/popularSkills/ui/PopularSkillsPage/PopularSkillsPage.tsx b/src/pages/analytics/popularSkills/ui/PopularSkillsPage/PopularSkillsPage.tsx
index aa292333d..063a6b6ab 100644
--- a/src/pages/analytics/popularSkills/ui/PopularSkillsPage/PopularSkillsPage.tsx
+++ b/src/pages/analytics/popularSkills/ui/PopularSkillsPage/PopularSkillsPage.tsx
@@ -4,7 +4,11 @@ import { i18Namespace, Analytics } from '@/shared/config';
 
 import { useGetPopularSkillsQuery } from '@/entities/skill';
 
-import { AnalyticPageTemplate, useAnalyticFilters } from '@/widgets/analytics/AnalyticPageTemplate';
+import {
+	AnalyticPageTemplate,
+	AnalyticPageTemplateSkeleton,
+	useAnalyticFilters,
+} from '@/widgets/analytics/AnalyticPageTemplate';
 import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper';
 
 import { PopularSkillsList } from '../PopularSkillsList/PopularSkillsList';
@@ -39,6 +43,7 @@ export const PopularSkillsPage = () => {
 
 	return (
 		<PageWrapper
+			skeleton={<AnalyticPageTemplateSkeleton />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasData={hasData}
diff --git a/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx b/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx
index 8d8f88a2f..b48b41c06 100644
--- a/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx
+++ b/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx
@@ -7,7 +7,11 @@ import {
 	useGetSpecializationsGeneralProgressQuery,
 } from '@/entities/specialization';
 
-import { AnalyticPageTemplate, useAnalyticFilters } from '@/widgets/analytics/AnalyticPageTemplate';
+import {
+	AnalyticPageTemplate,
+	AnalyticPageTemplateSkeleton,
+	useAnalyticFilters,
+} from '@/widgets/analytics/AnalyticPageTemplate';
 import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper';
 
 import { ProgressSpecializationsList } from '../ProgressSpecializationsList/ProgressSpecializationsList';
@@ -39,6 +43,7 @@ export const ProgressSpecializationsPage = () => {
 
 	return (
 		<PageWrapper
+			skeleton={<AnalyticPageTemplateSkeleton fieldsCount={3} />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}
diff --git a/src/pages/analytics/skillsProficiency/ui/SkillsProficiencyPage/SkillsProficiencyPage.tsx b/src/pages/analytics/skillsProficiency/ui/SkillsProficiencyPage/SkillsProficiencyPage.tsx
index 720f8836a..86429e53b 100644
--- a/src/pages/analytics/skillsProficiency/ui/SkillsProficiencyPage/SkillsProficiencyPage.tsx
+++ b/src/pages/analytics/skillsProficiency/ui/SkillsProficiencyPage/SkillsProficiencyPage.tsx
@@ -4,7 +4,11 @@ import { i18Namespace, Analytics } from '@/shared/config';
 
 import { useGetLearnedQuestionsQuery } from '@/entities/question';
 
-import { AnalyticPageTemplate, useAnalyticFilters } from '@/widgets/analytics/AnalyticPageTemplate';
+import {
+	AnalyticPageTemplate,
+	AnalyticPageTemplateSkeleton,
+	useAnalyticFilters,
+} from '@/widgets/analytics/AnalyticPageTemplate';
 import { PageWrapper, PageWrapperStubs } from '@/widgets/PageWrapper';
 
 import { SkillsProficiencyList } from '../SkillsProficiencyList/SkillsProficiencyList';
@@ -44,6 +48,7 @@ export const SkillsProficiencyPage = () => {
 
 	return (
 		<PageWrapper
+			skeleton={<AnalyticPageTemplateSkeleton withChips withSkillFilter />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}
diff --git a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx
index 5d3ad8294..25f2add0d 100644
--- a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx
+++ b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx
@@ -7,7 +7,6 @@ import {
 	SELECT_TARIFF_SETTINGS_TAB,
 	useAppSelector,
 } from '@/shared/libs';
-import { Loader } from '@/shared/ui/Loader';
 import { Stub, StubType } from '@/shared/ui/Stub';
 import { TablePagination } from '@/shared/ui/TablePagination';
 
@@ -87,7 +86,7 @@ export const PageWrapper = ({
 	};
 
 	if (isLoading) {
-		return skeleton || <Loader />;
+		return skeleton;
 	}
 
 	if (roles && !hasPermission) {

From 583263ab39582c70c1e6fcaa36d49e424f1a7efc Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Fri, 22 May 2026 16:09:28 +0300
Subject: [PATCH 4/8] YH-1564: replace rowsCount with default value in analytic
 page template and template mobile list skeletons

---
 .../ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx  | 3 +--
 .../AnalyticPageTemplateMobileList.skeleton.tsx                | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
index 701a3f0cc..417ba4cae 100644
--- a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
@@ -23,7 +23,6 @@ interface AnalyticPageTemplateSkeletonProps {
 }
 
 export const AnalyticPageTemplateSkeleton = ({
-	rowsCount = 10,
 	fieldsCount = 1,
 	withChips = false,
 	withImage = false,
@@ -67,7 +66,7 @@ export const AnalyticPageTemplateSkeleton = ({
 						</tr>
 					</thead>
 					<tbody>
-						{Array.from({ length: rowsCount }).map((_, idx) => (
+						{Array.from({ length: 10 }).map((_, idx) => (
 							<tr key={idx}>
 								<td>
 									<CheckboxSkeleton />
diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
index 260b77815..0fad0d0f3 100644
--- a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
@@ -14,12 +14,11 @@ interface AnalyticPageTemplateMobileListSkeletonProps {
 export const AnalyticPageTemplateMobileListSkeleton = ({
 	withChips = false,
 	fieldsCount = 1,
-	rowsCount = 10,
 	withImage = false,
 }: AnalyticPageTemplateMobileListSkeletonProps) => {
 	return (
 		<Flex componentType="ul" direction="column" gap="16">
-			{Array.from({ length: rowsCount }).map((_, index) => (
+			{Array.from({ length: 10 }).map((_, index) => (
 				<li key={index}>
 					<Card>
 						<Flex gap="12" direction="column">

From 6234d9342bddea65e35e88bf2696a011af7f0680 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Fri, 22 May 2026 17:07:15 +0300
Subject: [PATCH 5/8] YH-1564: replace previous skeleton layout with table
 skelton and add new props

---
 src/shared/ui/Table/Table.skeleton.tsx        | 22 ++++----
 .../AnalyticPageTemplate.skeleton.tsx         | 51 ++-----------------
 ...nalyticPageTemplateMobileList.skeleton.tsx |  6 +--
 3 files changed, 21 insertions(+), 58 deletions(-)

diff --git a/src/shared/ui/Table/Table.skeleton.tsx b/src/shared/ui/Table/Table.skeleton.tsx
index 36a1ebe0c..3c10f0661 100644
--- a/src/shared/ui/Table/Table.skeleton.tsx
+++ b/src/shared/ui/Table/Table.skeleton.tsx
@@ -6,6 +6,7 @@ import styles from './Table.module.css';
 
 interface TableSkeletonProps {
 	hasSelectors?: boolean;
+	hasAction?: boolean;
 	rowCount?: number;
 	columnCount?: number;
 	hasCopyButton?: boolean;
@@ -13,6 +14,7 @@ interface TableSkeletonProps {
 
 export const TableSkeleton = ({
 	hasSelectors = true,
+	hasAction = true,
 	rowCount = 10,
 	columnCount = 3,
 	hasCopyButton = false,
@@ -32,7 +34,7 @@ export const TableSkeleton = ({
 							<TextSkeleton variant="body3" width="10vw" />
 						</th>
 					))}
-					<th className={styles['actions-column']}></th>
+					{hasAction && <th className={styles['actions-column']}></th>}
 					{hasCopyButton && <th className={styles['actions-column']}></th>}
 				</tr>
 			</thead>
@@ -49,14 +51,16 @@ export const TableSkeleton = ({
 								<TextSkeleton variant="body3" width="80%" />
 							</td>
 						))}
-						<td className={styles.cell}>
-							<IconButtonSkeleton
-								aria-label="icon skeleton"
-								form="square"
-								size="small"
-								variant="tertiary"
-							/>
-						</td>
+						{hasAction && (
+							<td className={styles.cell}>
+								<IconButtonSkeleton
+									aria-label="icon skeleton"
+									form="square"
+									size="small"
+									variant="tertiary"
+								/>
+							</td>
+						)}
 						{hasCopyButton && (
 							<td className={styles.cell}>
 								<IconButtonSkeleton
diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
index 417ba4cae..cb6a78358 100644
--- a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
@@ -1,9 +1,8 @@
 import { useScreenSize } from '@/shared/libs';
 import { Card } from '@/shared/ui/Card';
-import { CheckboxSkeleton } from '@/shared/ui/Checkbox';
 import { Flex } from '@/shared/ui/Flex';
 import { Skeleton } from '@/shared/ui/Skeleton';
-import { StatusChipSkeleton } from '@/shared/ui/StatusChip';
+import { TableSkeleton } from '@/shared/ui/Table';
 import { TablePaginationSkeleton } from '@/shared/ui/TablePagination';
 import { TextSkeleton } from '@/shared/ui/Text';
 
@@ -16,14 +15,14 @@ import styles from './AnalyticPageTemplate.module.css';
 
 interface AnalyticPageTemplateSkeletonProps {
 	rowsCount?: number;
-	fieldsCount?: number;
+	columnCount?: number;
 	withChips?: boolean;
 	withImage?: boolean;
 	withSkillFilter?: boolean;
 }
 
 export const AnalyticPageTemplateSkeleton = ({
-	fieldsCount = 1,
+	columnCount = 1,
 	withChips = false,
 	withImage = false,
 	withSkillFilter = false,
@@ -46,50 +45,10 @@ export const AnalyticPageTemplateSkeleton = ({
 				<AnalyticPageTemplateMobileListSkeleton
 					withChips={withChips}
 					withImage={withImage}
-					fieldsCount={fieldsCount}
+					columnCount={columnCount}
 				/>
 			) : (
-				<table>
-					<thead>
-						<tr>
-							<td style={{ width: '50px' }}>
-								<CheckboxSkeleton />
-							</td>
-							<td>
-								<TextSkeleton variant="body5" width="30vw" />
-							</td>
-							{Array.from({ length: fieldsCount }).map((_, idx) => (
-								<td key={idx} style={{ width: '120px' }}>
-									<TextSkeleton variant="body5" width="120px" />
-								</td>
-							))}
-						</tr>
-					</thead>
-					<tbody>
-						{Array.from({ length: 10 }).map((_, idx) => (
-							<tr key={idx}>
-								<td>
-									<CheckboxSkeleton />
-								</td>
-								<td>
-									<Flex direction="column" gap="4">
-										<TextSkeleton variant="body3-accent" width="30vw" />
-										{withChips && (
-											<Flex>
-												<StatusChipSkeleton />
-											</Flex>
-										)}
-									</Flex>
-								</td>
-								{Array.from({ length: fieldsCount }).map((_, idx) => (
-									<td key={idx} style={{ width: '120px' }}>
-										<TextSkeleton variant="body3-accent" width="120px" />
-									</td>
-								))}
-							</tr>
-						))}
-					</tbody>
-				</table>
+				<TableSkeleton hasAction={false} hasSelectors={false} columnCount={columnCount} />
 			)}
 
 			<TablePaginationSkeleton />
diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
index 0fad0d0f3..2d370c8c3 100644
--- a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx
@@ -6,14 +6,14 @@ import { TextSkeleton } from '@/shared/ui/Text';
 
 interface AnalyticPageTemplateMobileListSkeletonProps {
 	withChips?: boolean;
-	fieldsCount?: number;
+	columnCount?: number;
 	withImage?: boolean;
 	rowsCount?: number;
 }
 
 export const AnalyticPageTemplateMobileListSkeleton = ({
 	withChips = false,
-	fieldsCount = 1,
+	columnCount = 1,
 	withImage = false,
 }: AnalyticPageTemplateMobileListSkeletonProps) => {
 	return (
@@ -25,7 +25,7 @@ export const AnalyticPageTemplateMobileListSkeleton = ({
 							{withChips && <StatusChipSkeleton />}
 							{withImage && <ImageWithWrapperSkeleton />}
 							<TextSkeleton variant="body3-accent" width="70%" />
-							{Array.from({ length: fieldsCount }).map((_, fieldIndex) => (
+							{Array.from({ length: columnCount }).map((_, fieldIndex) => (
 								<Flex key={fieldIndex} justify="between">
 									<TextSkeleton variant="body3-accent" width="25%" />
 									<TextSkeleton variant="body3-accent" width="15%" />

From ba0acba998db907ab91da9b59c10aaad8f7e4d91 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Fri, 22 May 2026 17:10:21 +0300
Subject: [PATCH 6/8] YH-1564: change props name and value in corresponding
 pages with skeleton

---
 .../ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx        | 2 +-
 .../ProgressSpecializationsPage/ProgressSpecializationsPage.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx b/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx
index c953b32c0..590e347a1 100644
--- a/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx
+++ b/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx
@@ -45,7 +45,7 @@ export const DifficultQuestionsPage = () => {
 
 	return (
 		<PageWrapper
-			skeleton={<AnalyticPageTemplateSkeleton fieldsCount={2} />}
+			skeleton={<AnalyticPageTemplateSkeleton columnCount={4} />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}
diff --git a/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx b/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx
index b48b41c06..aae3dfff9 100644
--- a/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx
+++ b/src/pages/analytics/progressSpecializations/ui/ProgressSpecializationsPage/ProgressSpecializationsPage.tsx
@@ -43,7 +43,7 @@ export const ProgressSpecializationsPage = () => {
 
 	return (
 		<PageWrapper
-			skeleton={<AnalyticPageTemplateSkeleton fieldsCount={3} />}
+			skeleton={<AnalyticPageTemplateSkeleton columnCount={5} />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}

From 6868c6172aa375520625147bd544ef37049afc43 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Fri, 22 May 2026 17:53:12 +0300
Subject: [PATCH 7/8] YH-1564: return Loader to page wrapper and change default
 column count in analytic page skeleton to 3

---
 src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx         | 3 ++-
 .../ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx  | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx
index 25f2add0d..5d3ad8294 100644
--- a/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx
+++ b/src/widgets/PageWrapper/ui/PageWrapper/PageWrapper.tsx
@@ -7,6 +7,7 @@ import {
 	SELECT_TARIFF_SETTINGS_TAB,
 	useAppSelector,
 } from '@/shared/libs';
+import { Loader } from '@/shared/ui/Loader';
 import { Stub, StubType } from '@/shared/ui/Stub';
 import { TablePagination } from '@/shared/ui/TablePagination';
 
@@ -86,7 +87,7 @@ export const PageWrapper = ({
 	};
 
 	if (isLoading) {
-		return skeleton;
+		return skeleton || <Loader />;
 	}
 
 	if (roles && !hasPermission) {
diff --git a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
index cb6a78358..9a7147163 100644
--- a/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
+++ b/src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx
@@ -22,7 +22,7 @@ interface AnalyticPageTemplateSkeletonProps {
 }
 
 export const AnalyticPageTemplateSkeleton = ({
-	columnCount = 1,
+	columnCount = 3,
 	withChips = false,
 	withImage = false,
 	withSkillFilter = false,

From fc80892b2a45b9abde83d49775b240b239c160a8 Mon Sep 17 00:00:00 2001
From: Gnarkill33 <gnarkill33@gmail.com>
Date: Fri, 22 May 2026 18:18:13 +0300
Subject: [PATCH 8/8] YH-1564: map analytic page skeleton to corresponding
 routes in main layout skeleton generator

---
 .../SkeletonGenerator/SkeletonGenerator.tsx          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx
index 688a7faa4..ac9c33809 100644
--- a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx
+++ b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx
@@ -5,6 +5,8 @@ import { Loader } from '@/shared/ui/Loader';
 
 import { EditProfileFormSkeleton } from '@/features/profile/editProfileForm';
 
+import { AnalyticPageTemplateSkeleton } from '@/widgets/analytics/AnalyticPageTemplate';
+
 import { CollectionsPageSkeleton } from '@/pages/admin/collection/collections';
 import { CompaniesTablePageSkeleton } from '@/pages/admin/company/companies';
 import { QuestionPageContentSkeleton } from '@/pages/admin/question/questionDetail';
@@ -73,6 +75,16 @@ const SkeletonGenerator = () => {
 			return <CompaniesTablePageSkeleton />;
 		case ROUTES.analytics.page:
 			return <AnalyticsPageSkeleton />;
+		case ROUTES.analytics['skills-proficiency'].page:
+			return <AnalyticPageTemplateSkeleton />;
+		case ROUTES.analytics.progressSpecializations.page:
+			return <AnalyticPageTemplateSkeleton />;
+		case ROUTES.analytics['difficult-questions'].page:
+			return <AnalyticPageTemplateSkeleton />;
+		case ROUTES.analytics['popular-questions'].page:
+			return <AnalyticPageTemplateSkeleton />;
+		case ROUTES.analytics['popular-skills'].page:
+			return <AnalyticPageTemplateSkeleton />;
 		default:
 			return <Loader />;
 	}