YH-1564: add skeleton for analytics pages

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

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 columnCount={4} />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}

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}

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}

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 columnCount={5} />}
 			isLoading={isLoading}
 			hasError={isError}
 			hasFilters={hasFilters}

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}

src/shared/ui/Table/Table.skeleton.tsx

@@ -6,13 +6,15 @@ import styles from './Table.module.css';
 
 interface TableSkeletonProps {
 	hasSelectors?: boolean;
+	hasAction?: boolean;
 	rowCount?: number;
 	columnCount?: number;
 	hasCopyButton?: boolean;
 }
 
 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

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

src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplate/AnalyticPageTemplate.skeleton.tsx

@@ -0,0 +1,57 @@
+import { useScreenSize } from '@/shared/libs';
+import { Card } from '@/shared/ui/Card';
+import { Flex } from '@/shared/ui/Flex';
+import { Skeleton } from '@/shared/ui/Skeleton';
+import { TableSkeleton } from '@/shared/ui/Table';
+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;
+	columnCount?: number;
+	withChips?: boolean;
+	withImage?: boolean;
+	withSkillFilter?: boolean;
+}
+
+export const AnalyticPageTemplateSkeleton = ({
+	columnCount = 3,
+	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}
+					columnCount={columnCount}
+				/>
+			) : (
+				<TableSkeleton hasAction={false} hasSelectors={false} columnCount={columnCount} />
+			)}
+
+			<TablePaginationSkeleton />
+		</Card>
+	);
+};

src/widgets/analytics/AnalyticPageTemplate/ui/AnalyticPageTemplateMobileList/AnalyticPageTemplateMobileList.skeleton.tsx

@@ -0,0 +1,40 @@
+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;
+	columnCount?: number;
+	withImage?: boolean;
+	rowsCount?: number;
+}
+
+export const AnalyticPageTemplateMobileListSkeleton = ({
+	withChips = false,
+	columnCount = 1,
+	withImage = false,
+}: AnalyticPageTemplateMobileListSkeletonProps) => {
+	return (
+		<Flex componentType="ul" direction="column" gap="16">
+			{Array.from({ length: 10 }).map((_, index) => (
+				<li key={index}>
+					<Card>
+						<Flex gap="12" direction="column">
+							{withChips && <StatusChipSkeleton />}
+							{withImage && <ImageWithWrapperSkeleton />}
+							<TextSkeleton variant="body3-accent" width="70%" />
+							{Array.from({ length: columnCount }).map((_, fieldIndex) => (
+								<Flex key={fieldIndex} justify="between">
+									<TextSkeleton variant="body3-accent" width="25%" />
+									<TextSkeleton variant="body3-accent" width="15%" />
+								</Flex>
+							))}
+						</Flex>
+					</Card>
+				</li>
+			))}
+		</Flex>
+	);
+};