#305-skeletons #329
#305-skeletons #329
Conversation
| '' | ||
| )} | ||
| </div> | ||
| {isLoading ? ( |
There was a problem hiding this comment.
давай сделаем как с остальными скелетонами
PageDescription - не нужно знать о загрузке и тд, по сути мы его можем переиспользовать в других компонентах, где даже может не быть обращение к серверу.
Тоесть, здесь тоже делаем компонент PageDescriptionSkeleton и используем его в зависимости от флага загрузки
| @@ -88,7 +92,16 @@ export const ProductsPage = () => { | |||
| <CategoryList /> | |||
| <div className={styles['content-main']}> | |||
| <section className={styles['content-products']}> | |||
| {categoriesProducts.results.length > 0 ? ( | |||
| {isLoading ? ( | |||
There was a problem hiding this comment.
вот так же делаем с PageDescriptionSkeleton
There was a problem hiding this comment.
это храним не в shared, а в компоненте PafeControlsSkeleton, например в папке ui. Потому что skeleton относится именно к своему компоненту
There was a problem hiding this comment.
переносим к своему компоненту
| {isLoading | ||
| ? Array(15) | ||
| .fill(0) | ||
| .map(sk => <Skeleton className={styles['sk-category-list__item']} inline={true} key={sk} />) |
There was a problem hiding this comment.
так не делаем, здесь должен быть компонент CategoryItemSkeleton, его уже здесь рендерим
|
|
||
| return ( | ||
| <div className={styles['category-list']}> | ||
| <Heading type={HeadingType.NORMAL} className={styles['category-list__title']}> | ||
| Категории | ||
| </Heading> | ||
| <ul className={styles['category-list__items']}> | ||
| {categoryBranches.branches?.length > 0 | ||
| {isLoading | ||
| ? Array(15) |
|
Внесла отмеченные тобой корректировки:
|
Приложу скрин, как выглядит прогрузка со скелетонами.