From 83e0df89e5e48fa3b3ea86b296e78ded7c3d0ada Mon Sep 17 00:00:00 2001 From: Pavel Samar Date: Mon, 4 May 2026 17:05:57 +0300 Subject: [PATCH 1/2] YH-1562: add skeleton for resource request creation page --- .../SkeletonGenerator/SkeletonGenerator.tsx | 3 + src/entities/resource/index.ts | 1 + .../ui/ResourceForm/ResourceForm.skeleton.tsx | 69 +++++++++++++++++++ .../resources/createResourceRequest/index.ts | 1 + ...ResourceRequestFormWithHeader.skeleton.tsx | 25 +++++++ 5 files changed, 99 insertions(+) create mode 100644 src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx create mode 100644 src/features/resources/createResourceRequest/ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton.tsx diff --git a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx index 688a7faa4..a5f58a91a 100644 --- a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx +++ b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx @@ -4,6 +4,7 @@ import { ROUTES } from '@/shared/config'; import { Loader } from '@/shared/ui/Loader'; import { EditProfileFormSkeleton } from '@/features/profile/editProfileForm'; +import { ResourceRequestFormWithHeaderSkeleton } from '@/features/resources/createResourceRequest'; import { CollectionsPageSkeleton } from '@/pages/admin/collection/collections'; import { CompaniesTablePageSkeleton } from '@/pages/admin/company/companies'; @@ -73,6 +74,8 @@ const SkeletonGenerator = () => { return ; case ROUTES.analytics.page: return ; + case ROUTES.wiki.resources.my.create.page: + return ; default: return ; } diff --git a/src/entities/resource/index.ts b/src/entities/resource/index.ts index a2af8eabb..81be5efcf 100644 --- a/src/entities/resource/index.ts +++ b/src/entities/resource/index.ts @@ -19,6 +19,7 @@ export { ResourcesStatusBlock } from './ui/ResourcesStatusBlock/ResourcesStatusB export { ResourceEditFormHeader } from './ui/ResourceEditFormHeader/ResourceEditFormHeader'; export { ResourceAdditionalInfo } from './ui/ResourceAdditionalInfo/ResourceAdditionalInfo'; export { ResourceAdditionalInfoSkeleton } from './ui/ResourceAdditionalInfo/ResourceAdditionalInfo.skeleton'; +export { ResourceFormSkeleton } from './ui/ResourceForm/ResourceForm.skeleton'; export type { ResourceRequest, diff --git a/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx b/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx new file mode 100644 index 000000000..166046b84 --- /dev/null +++ b/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx @@ -0,0 +1,69 @@ +import { ButtonSkeleton } from '@/shared/ui/Button'; +import { Flex } from '@/shared/ui/Flex'; +import { ImageLoaderSkeleton } from '@/shared/ui/ImageLoader'; +import { InputSkeleton } from '@/shared/ui/Input'; +import { Skeleton } from '@/shared/ui/Skeleton'; +import { TextSkeleton } from '@/shared/ui/Text'; + +import styles from './ResourceForm.module.css'; + +export const ResourceFormSkeleton = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; diff --git a/src/features/resources/createResourceRequest/index.ts b/src/features/resources/createResourceRequest/index.ts index efb543b45..8a3da65a5 100644 --- a/src/features/resources/createResourceRequest/index.ts +++ b/src/features/resources/createResourceRequest/index.ts @@ -1 +1,2 @@ export { ResourceRequestCreateForm } from './ui/ResourceRequestCreateForm/ResourceRequestCreateForm'; +export { ResourceRequestFormWithHeaderSkeleton } from './ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton'; diff --git a/src/features/resources/createResourceRequest/ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton.tsx b/src/features/resources/createResourceRequest/ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton.tsx new file mode 100644 index 000000000..4e6f40ec1 --- /dev/null +++ b/src/features/resources/createResourceRequest/ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton.tsx @@ -0,0 +1,25 @@ +import { ButtonSkeleton } from '@/shared/ui/Button'; +import { Card } from '@/shared/ui/Card'; +import { Flex } from '@/shared/ui/Flex'; +import { TextSkeleton } from '@/shared/ui/Text'; + +import { ResourceFormSkeleton } from '@/entities/resource'; + +import styles from './ResourceRequestFormWithHeader.module.css'; + +export const ResourceRequestFormWithHeaderSkeleton = () => { + return ( + + + + + + + + + + + + + ); +}; From aed15b301647efaadae3a662fff894f202d8d216 Mon Sep 17 00:00:00 2001 From: Pavel Samar Date: Wed, 13 May 2026 15:54:05 +0300 Subject: [PATCH 2/2] YH-1562: fix resource request skeleton --- .../SkeletonGenerator/SkeletonGenerator.tsx | 4 +- .../ui/ResourceForm/ResourceForm.skeleton.tsx | 58 +++++-------------- .../resource/ui/ResourceForm/ResourceForm.tsx | 34 +++++------ .../resources/createResourceRequest/index.ts | 2 +- .../ResourceRequestCreateForm.skeleton.tsx | 5 ++ ...ResourceRequestFormWithHeader.skeleton.tsx | 6 +- .../ui/FormField/FormField.skeleton.tsx | 9 ++- 7 files changed, 51 insertions(+), 67 deletions(-) create mode 100644 src/features/resources/createResourceRequest/ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton.tsx diff --git a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx index a5f58a91a..45a876c02 100644 --- a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx +++ b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx @@ -4,7 +4,7 @@ import { ROUTES } from '@/shared/config'; import { Loader } from '@/shared/ui/Loader'; import { EditProfileFormSkeleton } from '@/features/profile/editProfileForm'; -import { ResourceRequestFormWithHeaderSkeleton } from '@/features/resources/createResourceRequest'; +import { ResourceRequestCreateFormSkeleton } from '@/features/resources/createResourceRequest'; import { CollectionsPageSkeleton } from '@/pages/admin/collection/collections'; import { CompaniesTablePageSkeleton } from '@/pages/admin/company/companies'; @@ -75,7 +75,7 @@ const SkeletonGenerator = () => { case ROUTES.analytics.page: return ; case ROUTES.wiki.resources.my.create.page: - return ; + return ; default: return ; } diff --git a/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx b/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx index 166046b84..6569ff08a 100644 --- a/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx +++ b/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx @@ -1,69 +1,43 @@ import { ButtonSkeleton } from '@/shared/ui/Button'; import { Flex } from '@/shared/ui/Flex'; +import { FormFieldSkeleton } from '@/shared/ui/FormField'; import { ImageLoaderSkeleton } from '@/shared/ui/ImageLoader'; import { InputSkeleton } from '@/shared/ui/Input'; import { Skeleton } from '@/shared/ui/Skeleton'; -import { TextSkeleton } from '@/shared/ui/Text'; import styles from './ResourceForm.module.css'; export const ResourceFormSkeleton = () => { return ( - - - + - + - - - + - + - - - - - - - - - + + + - - - - - + - + - - - - - + - + - - - - - + - + - - - - - + - + ); }; diff --git a/src/entities/resource/ui/ResourceForm/ResourceForm.tsx b/src/entities/resource/ui/ResourceForm/ResourceForm.tsx index 688fef961..c6760f995 100644 --- a/src/entities/resource/ui/ResourceForm/ResourceForm.tsx +++ b/src/entities/resource/ui/ResourceForm/ResourceForm.tsx @@ -11,7 +11,6 @@ import { ImageLoaderWithoutCropper } from '@/shared/ui/ImageLoaderWithoutCropper import { Input } from '@/shared/ui/Input'; import { KeywordInput } from '@/shared/ui/KeywordInput'; import { KeywordSelect } from '@/shared/ui/KeywordSelect'; -import { Text } from '@/shared/ui/Text'; import { TextArea } from '@/shared/ui/TextArea'; import { SkillSelect } from '@/entities/skill/@x/resource'; @@ -48,12 +47,13 @@ export const ResourceForm = ({ readonly }: ResourceFormProps) => { return ( - - - {t(Marketplace.NAME_SHORT)} - +
- + {(field, hasError) => (