diff --git a/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx b/src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx index 688a7faa4..45a876c02 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 { ResourceRequestCreateFormSkeleton } 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..6569ff08a --- /dev/null +++ b/src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx @@ -0,0 +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 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) => ( { )} - - - - {t(Marketplace.DESCRIPTION_SHORT)} - + + + - + {(field, hasError) => ( { )} - + + { )} + {!!selectedSpecializations?.length && ( diff --git a/src/features/resources/createResourceRequest/index.ts b/src/features/resources/createResourceRequest/index.ts index efb543b45..aa73f0abd 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 { ResourceRequestCreateFormSkeleton } from './ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton'; diff --git a/src/features/resources/createResourceRequest/ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton.tsx b/src/features/resources/createResourceRequest/ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton.tsx new file mode 100644 index 000000000..d281b3c78 --- /dev/null +++ b/src/features/resources/createResourceRequest/ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton.tsx @@ -0,0 +1,5 @@ +import { ResourceRequestFormWithHeaderSkeleton } from '../ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton'; + +export const ResourceRequestCreateFormSkeleton = () => { + return ; +}; 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..00dd7c21f --- /dev/null +++ b/src/features/resources/createResourceRequest/ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton.tsx @@ -0,0 +1,25 @@ +import { ButtonSkeleton } from '@/shared/ui/Button'; +import { CardSkeleton } 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 ( + + + + + + + + + + + + + ); +}; diff --git a/src/shared/ui/FormField/FormField.skeleton.tsx b/src/shared/ui/FormField/FormField.skeleton.tsx index 13af70e31..df8098a0c 100644 --- a/src/shared/ui/FormField/FormField.skeleton.tsx +++ b/src/shared/ui/FormField/FormField.skeleton.tsx @@ -6,10 +6,15 @@ import { TextSkeleton } from '@/shared/ui/Text'; import { FormFieldProps } from './FormField'; import styles from './FormField.module.css'; -export const FormFieldSkeleton = ({ children, isLimitWidth }: Partial) => { +export const FormFieldSkeleton = ({ + children, + isLimitWidth, + direction = 'row', +}: Partial) => { return (