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 ; case ROUTES.analytics.page: return ; + case ROUTES.analytics['skills-proficiency'].page: + return ; + case ROUTES.analytics.progressSpecializations.page: + return ; + case ROUTES.analytics['difficult-questions'].page: + return ; + case ROUTES.analytics['popular-questions'].page: + return ; + case ROUTES.analytics['popular-skills'].page: + return ; default: return ; } diff --git a/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx b/src/pages/analytics/difficultQuestions/ui/DifficultQuestionsPage/DifficultQuestionsPage.tsx index 6640a9562..590e347a1 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 ( } 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 ( } 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 ( } 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..aae3dfff9 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 ( } 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 ( } isLoading={isLoading} hasError={isError} hasFilters={hasFilters} 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 = ({ ))} - + {hasAction && } {hasCopyButton && } @@ -49,14 +51,16 @@ export const TableSkeleton = ({ ))} - - - + {hasAction && ( + + + + )} {hasCopyButton && ( { + const { isMobile } = useScreenSize(); + + return ( + + + + + + + + + {withSkillFilter && } + + + {isMobile ? ( + + ) : ( + + )} + + + + ); +}; 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..2d370c8c3 --- /dev/null +++ b/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 ( + + {Array.from({ length: 10 }).map((_, index) => ( +
  • + + + {withChips && } + {withImage && } + + {Array.from({ length: columnCount }).map((_, fieldIndex) => ( + + + + + ))} + + +
  • + ))} +
    + ); +};