Skip to content

YH-1562: add skeleton for resource request creation page #1222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PavelSummer2611 wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

YH-1562: add skeleton for resource request creation page #1222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
83e0df8
YH-1562: add skeleton for resource request creation page
May 4, 2026
aed15b3
YH-1562: fix resource request skeleton
May 13, 2026
5d363cf
Merge remote-tracking branch 'origin/develop' into feature/YH-1562
May 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/app/layouts/MainLayout/SkeletonGenerator/SkeletonGenerator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -73,6 +74,8 @@ const SkeletonGenerator = () => {
return <CompaniesTablePageSkeleton />;
case ROUTES.analytics.page:
return <AnalyticsPageSkeleton />;
case ROUTES.wiki.resources.my.create.page:
return <ResourceRequestCreateFormSkeleton />;
default:
return <Loader />;
}
Expand Down
1 change: 1 addition & 0 deletions src/entities/resource/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
43 changes: 43 additions & 0 deletions src/entities/resource/ui/ResourceForm/ResourceForm.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = () => {

@PerelomaDenis PerelomaDenis May 8, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[ISSUE] - В компоненте ResourceForm в первых двух полях нужно внести изменения, чтобы был единый вид

Было

<Flex direction="column" gap="8" className={styles['form-field']}>
				<Text variant="body4" color="black-800">
					{t(Marketplace.NAME_SHORT)}
				</Text>
				<div className={styles.form}>
					<FormControl name="name" control={control} label={t(Marketplace.NAME_LABEL)}>
						{(field, hasError) => (
							<TextArea
								{...field}
								state={hasError ? 'error' : 'default'}
								className={styles.name}
								placeholder={t(Marketplace.NAME_LABEL)}
								disabled={readonly}
							/>
						)}
					</FormControl>
				</div>
			</Flex>

Стало

<FormField
	label={t(Marketplace.DESCRIPTION_SHORT)}
	direction="column"
	description={t(Marketplace.DESCRIPTION_LABEL)}
>
	<div className={styles.form}>
		<FormControl name="description" control={control}>
			{(field, hasError) => (
				<TextArea
					{...field}
					state={hasError ? 'error' : 'default'}
					className={styles.name}
					placeholder={t(Marketplace.DESCRIPTION_LABEL)}
					disabled={readonly}
				/>
			)}
		</FormControl>
	</div>
</FormField>

@PavelSummer2611 PavelSummer2611 May 13, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Исправил

return (
<Flex direction="column" gap="60" className={styles.wrapper}>
<FormFieldSkeleton direction="column">
<Skeleton width={240} height={74} borderRadius={16} />
</FormFieldSkeleton>

<FormFieldSkeleton direction="column">
<Skeleton width={240} height={74} borderRadius={16} />
</FormFieldSkeleton>

<FormFieldSkeleton>
<ImageLoaderSkeleton />
</FormFieldSkeleton>

<FormFieldSkeleton>
<InputSkeleton size="S" className={styles.select} />
</FormFieldSkeleton>

<FormFieldSkeleton>
<InputSkeleton size="S" className={styles.select} />
</FormFieldSkeleton>

<FormFieldSkeleton>
<InputSkeleton size="S" className={styles.select} />
<ButtonSkeleton size="large" width={210} className={styles['submit-button']} />
</FormFieldSkeleton>

<FormFieldSkeleton>
<InputSkeleton size="S" className={styles.select} />
</FormFieldSkeleton>
</Flex>
);
};
34 changes: 17 additions & 17 deletions src/entities/resource/ui/ResourceForm/ResourceForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -48,12 +47,13 @@ export const ResourceForm = ({ readonly }: ResourceFormProps) => {

return (
<Flex direction="column" gap="60" className={styles.wrapper}>
<Flex direction="column" gap="8" className={styles['form-field']}>
<Text variant="body4" color="black-800">
{t(Marketplace.NAME_SHORT)}
</Text>
<FormField
label={t(Marketplace.NAME_SHORT)}
direction="column"
description={t(Marketplace.NAME_LABEL)}
>
<div className={styles.form}>
<FormControl name="name" control={control} label={t(Marketplace.NAME_LABEL)}>
<FormControl name="name" control={control}>
{(field, hasError) => (
<TextArea
{...field}
Expand All @@ -65,17 +65,15 @@ export const ResourceForm = ({ readonly }: ResourceFormProps) => {
)}
</FormControl>
</div>
</Flex>
<Flex direction="column" gap="8" className={styles['form-field']}>
<Text variant="body4" color="black-800">
{t(Marketplace.DESCRIPTION_SHORT)}
</Text>
</FormField>

<FormField
label={t(Marketplace.DESCRIPTION_SHORT)}
direction="column"
description={t(Marketplace.DESCRIPTION_LABEL)}
>
<div className={styles.form}>
<FormControl
name="description"
control={control}
label={t(Marketplace.DESCRIPTION_LABEL)}
>
<FormControl name="description" control={control}>
{(field, hasError) => (
<TextArea
{...field}
Expand All @@ -87,7 +85,8 @@ export const ResourceForm = ({ readonly }: ResourceFormProps) => {
)}
</FormControl>
</div>
</Flex>
</FormField>

<FormField label={t(Marketplace.ICON_SHORT)} description={t(Marketplace.ICON_LABEL)}>
<ImageLoaderWithoutCropper
removeImage={removeImage}
Expand All @@ -113,6 +112,7 @@ export const ResourceForm = ({ readonly }: ResourceFormProps) => {
)}
</FormControl>
</FormField>

{!!selectedSpecializations?.length && (
<FormField label={t(Marketplace.SKILLS_SHORT)} description={t(Marketplace.SKILLS_LABEL)}>
<FormControl name="skills" control={control}>
Expand Down
1 change: 1 addition & 0 deletions src/features/resources/createResourceRequest/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export { ResourceRequestCreateForm } from './ui/ResourceRequestCreateForm/ResourceRequestCreateForm';
export { ResourceRequestCreateFormSkeleton } from './ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton';
5 changes: 5 additions & 0 deletions ...createResourceRequest/ui/ResourceRequestCreateForm/ResourceRequestCreateForm.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { ResourceRequestFormWithHeaderSkeleton } from '../ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton';

export const ResourceRequestCreateFormSkeleton = () => {
return <ResourceRequestFormWithHeaderSkeleton />;
};
25 changes: 25 additions & 0 deletions ...Request/ui/ResourceRequestCreateFormWithHeader/ResourceRequestFormWithHeader.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Flex componentType="main" className={styles.wrapper}>
<Flex align="center" className={styles.buttons}>
<ButtonSkeleton size="large" width={210} className={styles['submit-button']} />
</Flex>

<CardSkeleton className={styles.content}>
<Flex direction="column" gap="28">
<TextSkeleton variant="body5-strong" width={220} />
<ResourceFormSkeleton />
</Flex>
</CardSkeleton>
</Flex>
);
};
9 changes: 7 additions & 2 deletions src/shared/ui/FormField/FormField.skeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<FormFieldProps>) => {
export const FormFieldSkeleton = ({
children,
isLimitWidth,
direction = 'row',
}: Partial<FormFieldProps>) => {
return (
<Flex
gap="120"
gap={direction === 'row' ? '120' : '20'}
direction={direction}
className={classNames(styles['form-field'], { [styles['limit-width']]: isLimitWidth })}
>
<Flex direction="column" className={styles.titles} gap="8">
Expand Down