YH-2049: add skeleton for CollectionCreatePage#1282
Conversation
CreateYourDream
added
review
| roles={['admin', 'author']} | ||
| hasData | ||
| stubs={{}} | ||
| skeleton={<CollectionCreateFormSkeleton />} |
There was a problem hiding this comment.
[ISSUE] - Сюда скелетон нет смысла указыать так как мы не загружаем ничего здесь. skeleton работает в паре с isLoading. А isLoading мы тут не используем
| return ( | ||
| <Flex componentType="main" direction="column" gap="24"> | ||
| <CollectionCreateFormHeaderSkeleton /> | ||
| <Card> |
There was a problem hiding this comment.
[SUGGESTION] - Вместо Card используй CardSkeleton. Фактически разницы не будет конкретно здесь, но надо сделать так
|
|
||
| import { CollectionFormSkeleton } from '@/entities/collection'; | ||
|
|
||
| import { CollectionCreateFormHeaderSkeleton } from '@/features/collections/createCollection'; |
There was a problem hiding this comment.
[SUGGESTION] - Импорт относительный надо сделать
| export { PreviewCollectionsItemSkeleton } from './ui/PreviewCollectionItem/PreviewCollectionsItem.skeleton'; | ||
| export { CollectionsPreviewSkeleton } from './ui/CollectionPreview/CollectionPreview.sekeleton'; | ||
| export { CollectionSelect } from './ui/CollectionSelect/CollectionSelect'; | ||
| export { CollectionFormSkeleton } from './ui/CollectionForm/CollectionForm.skeleton'; |
There was a problem hiding this comment.
[SUGGESTION] - Глуппый с моей стороны коммент, но подвинь этот импорт под основной компонент, чтобы было так
| dataTestId={dataTestId} | ||
| borderRadius={12} | ||
| width={width} | ||
| height={height} |
There was a problem hiding this comment.
[ISSUE] - Высоту вручную прокидывать нет смысла, так как она регулируется с помощью пропса size
| <FormFieldSkeleton> | ||
| <FormControlSkeleton className={styles['skeleton-checkbox-control']}> | ||
| <Flex gap="26" maxWidth={true} align="center"> | ||
| <Skeleton width={170} height={20} borderRadius={20} /> |
There was a problem hiding this comment.
[ISSUE] - Тут для Radio
|
|
||
| <FormFieldSkeleton> | ||
| <FormControlSkeleton> | ||
| <DropdownSkeleton |
There was a problem hiding this comment.
[ISSUE] - Тут для SpecializationSelect
| <FormFieldSkeleton> | ||
| <FormControlSkeleton> | ||
| <Flex direction="column" gap="28"> | ||
| <DropdownSkeleton size="S" /> |
There was a problem hiding this comment.
[ISSUE] - Тут для KeywordSelect и KeywordInput
| <FormFieldSkeleton> | ||
| <FormControlSkeleton className={styles['skeleton-actions-control']}> | ||
| <Flex gap="8" justify="between"> | ||
| <TextSkeleton width={200} variant="body5" className={styles['skeleton-actions-text']} /> |
There was a problem hiding this comment.
[ISSUE] - Тут и ниже похожие будут скелетоны для ChooseQuestionsDrawer и ChooseTasksDrawer.
И formFieldSkeleton получается не нужны тут так как внутри этих компонент нужно будет указать скелетоны для текстов
| max-width: 408px; | ||
| } | ||
|
|
||
| .skeleton-title-control { |
There was a problem hiding this comment.
[ISSUE] - Слишком много ненужных стилей относящихся к скелетонам. По идее их должно быть 0. Так как в скелетонах переиспользуются стили основного компонента
There was a problem hiding this comment.
- оставил стиль 'skeleton-textarea' который устанавливает margin для TextAreaSkeleton подобно реализации TextArea в CollectionForm
- оставил стиль 'skeleton-form-field' т.к FormFieldSkeleton создает лишний отступ при countTextFields=1, хотя при значении countTextFields > 2 все встает ровно по контентной части
- оставил 'skeleton-keywords-control' который добавляет отступ чтобы скелетон соответствовал макету, поскольку в KeywordInput при пустом keywordsArray рендериться пустой div и gap до этого div дает этот самый отступ, поэтому решил задать отступ сверху
PerelomaDenis
added
comments
… into feature/YH-2049
… into feature/YH-2049
… into feature/YH-2049
2 participants
Дополнительные изменения: