YH-2049: add skeleton for CollectionCreatePage

src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx

@@ -3,6 +3,7 @@ import { matchPath, useLocation } from 'react-router-dom';
 import { ROUTES } from '@/shared/config';
 import { Loader } from '@/shared/ui/Loader';
 
+import { CollectionCreateFormSkeleton } from '@/features/collections/createCollection';
 import { EditProfileFormSkeleton } from '@/features/profile/editProfileForm';
 import { QuestionCreateFormSkeleton } from '@/features/question/createQuestion';
 
@@ -75,6 +76,8 @@ const SkeletonGenerator = () => {
 			return <EditProfileFormSkeleton />;
 		case ROUTES.admin.questions.create.page:
 			return <QuestionCreateFormSkeleton />;
+		case ROUTES.admin.collections.create.page:
+			return <CollectionCreateFormSkeleton />;
 		case ROUTES.admin.questions.page:
 			return <QuestionsTablePageSkeleton />;
 		case ROUTES.admin.specializations.page:

src/entities/collection/index.ts

@@ -8,11 +8,12 @@ export { LS_INIT_COLLECTION_ID } from './model/constants/collection';
 export { getCollectionRoute } from '@/entities/collection/lib/getCollectionRoute';
 export { collectionsMock } from './api/__mock__/data';
 export { collectionHandlers } from './api/__mock__/index';
-export { CollectionForm } from './ui/CollectionForm/CollectionForm';
 export * from './api/collectionApi';
 
 export { ChooseCollectionAccess } from './ui/ChooseCollectionAccess/ChooseCollectionAccess';
 export { CollectionPreview } from './ui/CollectionPreview/CollectionPreview';
 export { PreviewCollectionsItemSkeleton } from './ui/PreviewCollectionItem/PreviewCollectionsItem.skeleton';
 export { CollectionsPreviewSkeleton } from './ui/CollectionPreview/CollectionPreview.sekeleton';
 export { CollectionSelect } from './ui/CollectionSelect/CollectionSelect';
+export { CollectionForm } from './ui/CollectionForm/CollectionForm';
+export { CollectionFormSkeleton } from './ui/CollectionForm/CollectionForm.skeleton';

src/entities/collection/ui/CollectionForm/CollectionForm.module.css

@@ -21,4 +21,23 @@
   width: 100%;
   min-width: 100px;
   max-width: 408px;
+}
+
+.skeleton-form-field {
+  height: 48px;
+}
+
+.skeleton-textarea {
+  margin-top: 18px;
+}
+
+.skeleton-keywords-control {
+  margin-bottom: 24px;
+}
+
+
+@media (width < 1064px) {
+  .skeleton-keywords-control {
+    margin-bottom: 0;
+  }
 }

src/entities/collection/ui/CollectionForm/CollectionForm.skeleton.tsx

@@ -0,0 +1,84 @@
+import { Flex } from '@/shared/ui/Flex';
+import { FormControlSkeleton } from '@/shared/ui/FormControl';
+import { FormFieldSkeleton } from '@/shared/ui/FormField';
+import { ImageLoaderWithoutCropperSkeleton } from '@/shared/ui/ImageLoaderWithoutCropper';
+import { InputSkeleton } from '@/shared/ui/Input';
+import { KeywordInputSkeleton } from '@/shared/ui/KeywordInput';
+import { KeywordSelectSkeleton } from '@/shared/ui/KeywordSelect';
+import { RadioSkeleton } from '@/shared/ui/Radio';
+import { TextSkeleton } from '@/shared/ui/Text';
+import { TextAreaSkeleton } from '@/shared/ui/TextArea';
+
+import { CompanySelectSkeleton } from '@/entities/company/@x/collection';
+import { ChooseQuestionsDrawerSkeleton } from '@/entities/question/@x/collection';
+import { SpecializationSelectSkeleton } from '@/entities/specialization/@x/collection';
+import { ChooseTasksDrawerSkeleton } from '@/entities/task/@x/collection';
+
+import styles from './CollectionForm.module.css';
+
+export const CollectionFormSkeleton = () => {
+	return (
+		<>
+			<TextSkeleton width={160} variant="body5" />
+
+			<Flex direction="column" gap="60">
+				<FormFieldSkeleton>
+					<FormControlSkeleton className={styles['skeleton-form-field']}>
+						<InputSkeleton size="L" />
+					</FormControlSkeleton>
+				</FormFieldSkeleton>
+
+				<FormFieldSkeleton countTextFields={2}>
+					<FormControlSkeleton>
+						<CompanySelectSkeleton />
+					</FormControlSkeleton>
+				</FormFieldSkeleton>
+
+				<FormFieldSkeleton direction="column">
+					<FormControlSkeleton>
+						<TextAreaSkeleton
+							className={styles['skeleton-textarea']}
+							width={225}
+							height={80}
+							borderRadius={24}
+						/>
+					</FormControlSkeleton>
+				</FormFieldSkeleton>
+
+				<FormFieldSkeleton>
+					<ImageLoaderWithoutCropperSkeleton />
+				</FormFieldSkeleton>
+
+				<FormFieldSkeleton>
+					<Flex gap="56">
+						<RadioSkeleton />
+						<RadioSkeleton />
+					</Flex>
+				</FormFieldSkeleton>
+
+				<FormFieldSkeleton countTextFields={2}>
+					<FormControlSkeleton>
+						<SpecializationSelectSkeleton />
+					</FormControlSkeleton>
+				</FormFieldSkeleton>
+
+				<FormFieldSkeleton>
+					<FormControlSkeleton className={styles['skeleton-keywords-control']}>
+						<Flex direction="column" gap="26" maxHeight={true}>
+							<KeywordSelectSkeleton />
+							<KeywordInputSkeleton />
+						</Flex>
+					</FormControlSkeleton>
+				</FormFieldSkeleton>
+
+				<FormControlSkeleton>
+					<ChooseQuestionsDrawerSkeleton />
+				</FormControlSkeleton>
+
+				<FormControlSkeleton>
+					<ChooseTasksDrawerSkeleton />
+				</FormControlSkeleton>
+			</Flex>
+		</>
+	);
+};

src/entities/company/@x/collection.ts

@@ -1,2 +1,3 @@
 export type { Company } from '../model/types/companyTypes';
 export { CompanySelect } from '../ui/CompanySelect/CompanySelect';
+export { CompanySelectSkeleton } from '../ui/CompanySelect/CompanySelect.skeleton';

src/entities/company/index.ts

@@ -2,6 +2,7 @@ export { CompanyCard } from './ui/CompanyCard/CompanyCard';
 export { CompanyCardSkeleton } from './ui/CompanyCard/CompanyCard.skeleton';
 
 export { CompanySelect } from './ui/CompanySelect/CompanySelect';
+export { CompanySelectSkeleton } from './ui/CompanySelect/CompanySelect.skeleton';
 export { CompanyCompactList } from './ui/CompanyCompactList/CompanyCompactList';
 export { CompanyCompactListSkeleton } from './ui/CompanyCompactList/CompanyCompactList.skeleton';
 export { PublicCompanySelect } from './ui/PublicCompanySelect/PublicCompanySelect';

src/entities/company/ui/CompanySelect/CompanySelect.skeleton.tsx

@@ -0,0 +1,5 @@
+import { SelectWithChipsSkeleton } from '@/shared/ui/SelectWithChips';
+
+export const CompanySelectSkeleton = () => {
+	return <SelectWithChipsSkeleton />;
+};

src/entities/question/@x/collection.ts

@@ -1,3 +1,4 @@
 export type { Question, GeneratedQuestionDto } from '../model/types/question';
 export { ChooseQuestionsDrawer } from '../ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer';
+export { ChooseQuestionsDrawerSkeleton } from '../ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton';
 export { GENERATED_QUESTIONS_LS_KEY } from '../model/constants/question';

src/entities/question/index.ts

@@ -35,6 +35,7 @@ export { PreviewQuestionsItem } from './ui/PreviewQuestionsItem/PreviewQuestions
 export { PreviewQuestionsItemSkeleton } from './ui/PreviewQuestionsItem/PreviewQuestionsItem.skeleton';
 export { QuestionAdditionalInfo } from './ui/QuestionAdditionalInfo/QuestionAdditionalInfo';
 export { QuestionAdditionalInfoSkeleton } from './ui/QuestionAdditionalInfo/QuestionAdditionalInfo.skeleton';
+export { ChooseQuestionsDrawerSkeleton } from './ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton';
 export { ProgressBlock } from './ui/ProgressBlock/ProgressBlock';
 export { ProgressBlockSkeleton } from './ui/ProgressBlock/ProgressBlock.skeleton';
 export { questionsMock } from './api/__mocks__/data';

src/entities/question/ui/ChooseQuestionsDrawer/ChooseQuestionsDrawer.skeleton.tsx

@@ -0,0 +1,22 @@
+import { ButtonSkeleton } from '@/shared/ui/Button';
+import { Flex } from '@/shared/ui/Flex';
+import { TextSkeleton } from '@/shared/ui/Text';
+
+import styles from './ChooseQuestionsDrawer.module.css';
+
+export const ChooseQuestionsDrawerSkeleton = () => {
+	return (
+		<Flex justify="between">
+			<Flex gap="120">
+				<Flex direction="column" gap="8">
+					<TextSkeleton variant="body4" width={170} />
+					<TextSkeleton variant="body2" width={230} />
+				</Flex>
+				<Flex direction="column" gap="24">
+					<TextSkeleton variant="body3-accent" width={220} />
+				</Flex>
+			</Flex>
+			<ButtonSkeleton className={styles['add-button']} width={174} size="medium" />
+		</Flex>
+	);
+};

src/entities/specialization/@x/collection.ts

@@ -1,2 +1,3 @@
 export type { Specialization } from '../model/types/specialization';
 export { SpecializationSelect } from '../ui/SpecializationSelect/SpecializationSelect';
+export { SpecializationSelectSkeleton } from '../ui/SpecializationSelect/SpecializationSelect.skeleton';

src/entities/task/@x/collection.ts

@@ -1,2 +1,3 @@
 export { ChooseTasksDrawer } from '../ui/ChooseTasksDrawer';
+export { ChooseTasksDrawerSkeleton } from '../ui/ChooseTasksDrawer/ChooseTasksDrawer.skeleton';
 export type { Task } from '../model/types/task';

src/entities/task/index.ts

@@ -36,7 +36,7 @@ export { TaskCategorySelectSkeleton } from './ui/TaskCategorySelect/TaskCategory
 export { TaskStructuresField } from './ui/TaskStructuresField/TaskStructuresField';
 export { TaskCategoryFilterList } from './ui/TaskCategoryFilterList/TaskCategoryFilterList';
 export { taskCategories } from './model/constants/task';
-export { ChooseTasksDrawer } from './ui/ChooseTasksDrawer';
+export { ChooseTasksDrawer, ChooseTasksDrawerSkeleton } from './ui/ChooseTasksDrawer';
 export { taskHandlers } from './api/__mocks__';
 export { TaskCardSkeleton } from './ui/TaskCard/TaskCard.skeleton';
 export { TaskCategoryFilterListSkeleton } from './ui/TaskCategoryFilterList/TaskCategoryFilterList.skeleton';

src/entities/task/ui/ChooseTasksDrawer/ChooseTasksDrawer.skeleton.tsx

@@ -0,0 +1,22 @@
+import { Flex } from "@/shared/ui/Flex";
+import { TextSkeleton } from "@/shared/ui/Text";
+import { ButtonSkeleton } from "@/shared/ui/Button";
+
+import styles from './ChooseTasksDrawer.module.css';
+
+export const ChooseTasksDrawerSkeleton = () => {
+	return (
+		<Flex justify="between">
+			<Flex gap="120">
+				<Flex direction="column" gap="8">
+					<TextSkeleton variant="body4" width={170} />
+					<TextSkeleton variant="body2" width={230} />
+				</Flex>
+				<Flex direction="column" gap="24">
+					<TextSkeleton variant="body3-accent" width={220} />
+				</Flex>
+			</Flex>
+			<ButtonSkeleton className={styles['add-button']} width={174} size='medium' />
+		</Flex>
+	);
+};

src/entities/task/ui/ChooseTasksDrawer/index.ts

@@ -1 +1,2 @@
 export { ChooseTasksDrawer } from './ChooseTasksDrawer';
+export { ChooseTasksDrawerSkeleton } from './ChooseTasksDrawer.skeleton';

src/features/collections/createCollection/index.ts

@@ -1,3 +1,4 @@
 export { CollectionCreateForm } from './ui/CollectionCreateForm/CollectionCreateForm';
+export { CollectionCreateFormSkeleton } from './ui/CollectionCreateForm/CollectionCreateForm.skeleton';
 export { getCreateCollectionsApiErrorMessage } from './lib/utils/getCreateCollectionsApiErrorMessage';
 export { createCollectionHandlers } from './api/__mocks__';

src/features/collections/createCollection/ui/CollectionCreateForm/CollectionCreateForm.skeleton.tsx

@@ -0,0 +1,17 @@
+import { CardSkeleton } from '@/shared/ui/Card';
+import { Flex } from '@/shared/ui/Flex';
+
+import { CollectionFormSkeleton } from '@/entities/collection';
+
+import { CollectionCreateFormHeaderSkeleton } from '../../ui/CollectionCreateFormHeader/CollectionCreateFormHeader.skeleton';
+
+export const CollectionCreateFormSkeleton = () => {
+	return (
+		<Flex componentType="main" direction="column" gap="24">
+			<CollectionCreateFormHeaderSkeleton />
+			<CardSkeleton>
+				<CollectionFormSkeleton />
+			</CardSkeleton>
+		</Flex>
+	);
+};

src/features/collections/createCollection/ui/CollectionCreateFormHeader/CollectionCreateFormHeader.skeleton.tsx

@@ -0,0 +1,12 @@
+import { BackButtonSkeleton } from '@/shared/ui/BackButton';
+import { ButtonSkeleton } from '@/shared/ui/Button';
+import { Flex } from '@/shared/ui/Flex';
+
+export const CollectionCreateFormHeaderSkeleton = () => {
+	return (
+		<Flex align="center" gap="8" justify="between">
+			<BackButtonSkeleton />
+			<ButtonSkeleton width={148} />
+		</Flex>
+	);
+};

src/pages/admin/collection/collectionCreate/ui/CollectionCreatePage/CollectionCreatePage.tsx

@@ -1,10 +1,17 @@
 import { CollectionCreateForm } from '@/features/collections/createCollection';
+import { CollectionCreateFormSkeleton } from '@/features/collections/createCollection';
 
 import { PageWrapper } from '@/widgets/PageWrapper';
 
 const CollectionCreatePage = () => {
 	return (
-		<PageWrapper roles={['admin', 'author']} hasData stubs={{}} content={<CollectionCreateForm />}>
+		<PageWrapper
+			roles={['admin', 'author']}
+			hasData
+			stubs={{}}
+			skeleton={<CollectionCreateFormSkeleton />}
+			content={<CollectionCreateForm />}
+		>
 			{({ content }) => content}
 		</PageWrapper>
 	);

src/shared/ui/Button/Button.skeleton.tsx

@@ -13,8 +13,8 @@ export const ButtonSkeleton = ({
 	fullWidth,
 	size = 'medium',
 	destructive,
-	width,
-}: ButtonProps & { width?: number }) => {
+	width
+}: ButtonProps & { width?: string | number }) => {
 	const tagName = getTagName(variant);
 
 	return (

src/shared/ui/Flex/Flex.module.css

@@ -62,6 +62,10 @@
   flex-wrap: nowrap;
 }
 
+.gap2 {
+  gap: 2px;
+}
+
 .gap4 {
   gap: 4px;
 }
@@ -126,6 +130,10 @@
   gap: 52px;
 }
 
+.gap56 {
+  gap: 56px;
+}
+
 .gap60 {
   gap: 60px;
 }

src/shared/ui/Flex/constants.ts

@@ -29,6 +29,7 @@ export const wrapClasses: Record<FlexWrap, string> = {
 };
 
 export const gapClasses: Record<FlexGap, string> = {
+	'2': styles.gap2,
 	'4': styles.gap4,
 	'6': styles.gap6,
 	'8': styles.gap8,
@@ -45,6 +46,7 @@ export const gapClasses: Record<FlexGap, string> = {
 	'40': styles.gap40,
 	'48': styles.gap48,
 	'52': styles.gap52,
+	'56': styles.gap56,
 	'60': styles.gap60,
 	'100': styles.gap100,
 	'120': styles.gap120,

src/shared/ui/Flex/types.ts

@@ -9,6 +9,7 @@ export type FlexWrap = 'wrap' | 'nowrap';
 export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
 
 export type FlexGap =
+	| '2'
 	| '4'
 	| '6'
 	| '8'
@@ -25,6 +26,7 @@ export type FlexGap =
 	| '40'
 	| '48'
 	| '52'
+	| '56'
 	| '60'
 	| '100'
 	| '120';

src/shared/ui/FormField/FormField.skeleton.tsx

@@ -6,11 +6,16 @@ import { TextSkeleton } from '@/shared/ui/Text';
 import { FormFieldProps } from './FormField';
 import styles from './FormField.module.css';
 
+interface FormFieldSkeletonProps extends Partial<FormFieldProps> {
+	countTextFields?: number;
+}
+
 export const FormFieldSkeleton = ({
 	children,
 	direction = 'row',
 	isLimitWidth,
-}: Partial<FormFieldProps>) => {
+	countTextFields = 1,
+}: FormFieldSkeletonProps) => {
 	return (
 		<Flex
 			gap={direction === 'row' ? '120' : '20'}
@@ -19,7 +24,11 @@ export const FormFieldSkeleton = ({
 		>
 			<Flex direction="column" className={styles.titles} gap="8">
 				<TextSkeleton variant="body4" width="200px" />
-				<TextSkeleton variant="body2" width="100%" />
+				<Flex direction="column" gap="2">
+					{Array.from({ length: countTextFields }).map((_, index) => (
+						<TextSkeleton key={index} variant="body2" width="100%" />
+					))}
+				</Flex>
 			</Flex>
 			{children}
 		</Flex>