Frontend | Features/loading #196

KarolinaEsepenok · 2023-05-02T14:03:50Z

Есть пару вопросов, которые хотелось бы обсудить:

В файлs loading.tsx стоит ли переносить
с тайтлом, чтобы отображались сразу названия блоков или вместо этого написать Loading? или не нужен этот блок?(но без него там верска "сбивается").
Нужен ли скелетон на стр каталог на фильтрах? он там реализован, но зависит от загрузки games. Тот что я реализовала, просто накладывается наверх, Мне кажется будет лучше убрать тот, который я реализовала и оставить тот, который был(я не знаю как его спрятать при адаптиве, там фильтры сворачиваются на определенной ширине).
У меня проблема с версткой адаптивной части, так как не всегда корректно отображается адаптив самих страниц(медленная загрузка).
Скелетон на стр новости использовала тот, что для карточки игры, он очень похож на дизайн новости, но отличия в длине картинки, есть ли смысл создавать компонент на скелетон новости? я просто не смогла задать другую длину, может и так можно.
очень жду комментарии)

…g/news

paqstd-dev

Loading ui должен быть максимально "обезличен" - не имеет никаких названий, все блоки повторяют примерный интерфейс страницы или блока. Текстовые названия или блоки можно делать линиями разных размеров.

Импорт всех компонентов Skeleton должен быть примерно таким:

import {SkeletonCard} from 'components/Skeleton'

Для этого нужно в файле components/Skeleton/index.ts указать импорты из components/Skeleton/*/**.

Перед созданием коммита важно проверить изменения (опечатки, лишние комментарии и отступы).

Необходимо подтянуть последние изменения frontend ветки и добавить loading файлы для news details страницы.

paqstd-dev · 2023-05-02T18:44:16Z

frontend/README.md

@@ -1,4 +1,4 @@
-# GSpot Frontend
+yy# GSpot Frontend


Это нужно убрать

paqstd-dev · 2023-05-02T18:45:12Z

frontend/app/(main)/catalog/page.module.scss

+.openFilter {
+  @apply mb-[10px] block h-[44px] w-full flex-row items-center justify-center rounded-default
+  border border-solid border-main-400 bg-main-30 tracking-[0.4px] text-white hover:border-main-500 hover:bg-main-40 lg:hidden;
+}
+
+.components {
+  @apply mb-[10px] mt-[20px] flex flex-col items-start justify-start;
+
+  @media (min-width: 576px) {
+    @apply mb-[20px];
+  }
+  @media (min-width: 992px) {
+    @apply mt-[30px];
+  }
+  @media (min-width: 1310px) {
+    @apply pr-[10px];
+  }
+}
+
+.wrapper {
+  @apply hidden lg:block;
+
+  &.open {
+    @apply block;
+  }
+}
+
+.title {
+  @apply mb-[25px] flex h-auto w-full flex-row items-center justify-between text-base font-semibold
+  tracking-default text-white;
+}
+
+.clearFilters {
+  @apply text-[12px] font-normal tracking-[0px] text-primary;
+}
+
+.applyFilter {
+  @apply flex h-[44px] w-full flex-row items-center justify-center rounded-default border
+  border-solid border-main-400 bg-main-30 tracking-[.4px] text-white hover:border-main-500 hover:bg-main-40;
+}


Эти стили тут не нужны, они никак не используются.

paqstd-dev · 2023-05-02T18:46:33Z

frontend/app/(main)/details/loading.tsx

Для страницы тоже нужен loading ui. Повторяем примерный интерфейс страницы

paqstd-dev · 2023-05-02T18:48:03Z

frontend/app/(main)/loading.tsx

+export default function Loading() {
+  return (
+    <>
+      <Section
+        title={
+          <>
+            <b>Лучшие игры</b> этого месяца
+          </>
+        }
+      >
+        <div className={s.bestGames}>
+          {[...new Array(2)].map((_, index) => (
+            <SkeletonGameBigCard key={index} />
+          ))}
+        </div>
+        <Section title={<>Новинки и обновления</>} />
+        <div className={s.card}>
+          {[...new Array(10)].map((_, index) => (
+            <SkeletonCard key={index} />
+          ))}
+        </div>
+      </Section>
+    </>
+  )
+}


Блоки не должны иметь названия. Вместо названия показываем линию или прямоугольник.

Неправильная вложенность Section:

<Section> <Section /> </Section>

Должно быть так:

<Section /> <Section />

Лучше на название блока сделать отдельный скелетон тогда?

Или лучше скелетон текст наподобие скелетона инпута и передавать просто размер текста( в описании карточек, в тайтле и на странице детали?)

Название можно сделать линией

paqstd-dev · 2023-05-02T18:49:15Z

frontend/app/(main)/page.module.scss

+
+//Skeleton styles
+.bestGames {
+  @apply mt-3 mb-20 grid grid-cols-2 gap-4 max-lg:grid-cols-1;
+}
+.card {
+  @apply mt-3 grid  grid-cols-5 gap-4 max-xl:grid-cols-3 max-sm:grid-cols-2 max-[440px]:grid-cols-1;
+}


Стили скелетона не должны хранится в основном файле стилей страницы.

У меня реализован скелетон на 1 карточку. В первом блоке "Лучшие игры" две карточки нужно и ниже где новинки пять, где тогда писать стили , чтобы сверстать блок с двумя и пятью картами? в каталоге для этого я использую стили самой станицы(.row, .columns), на главной же странице все реализовано через карусель.

Для каждого компонента скелетона стили хранятся рядом с этим компонентом

paqstd-dev · 2023-05-02T18:50:00Z

frontend/app/(main)/page.tsx

@@ -46,12 +46,14 @@ const Home = async () => {
        <div className={s.sections}>
          {otherGames && (
            <Section title="Игры">
+              {' '}


Этот отступ не нужен, его нужно убрать. Точно такой же чуть ниже.

paqstd-dev · 2023-05-02T18:51:53Z

frontend/package.json

@@ -21,6 +21,7 @@
    "classnames": "^2.3.2",
    "next": "^13.3.1-canary.4",
    "qs": "^6.11.1",
+    "rc-progress": "^3.4.1",


Эта библиотека/модуль нигде не используется. Нужно удалить его локально npm uninstall rc-progress и он автоматически удалится из этого и package-lock.json файла.

paqstd-dev · 2023-05-02T18:58:29Z

frontend/app/(main)/catalog/loading.tsx

+              {[...new Array(17)].map((_, index) => (
+                <SkeletonInput size={'44'} key={index} />
+              ))}


Размеры инпутов должны быть разные у скелетона фильтров. В идеале повторить примерный интерфейс фильтра.

Важно учитывать, что для мобильных устройств компонент фильтра выглядит по другому.

нужен ли этот второй скелетон на фильтры? я спрашивала в первом комментарии. и как реализовать, чтобы для моб устройств он спрятался, если в файле лоадинг нет логики? создать компонент скелетон на фильтры отдельный?

Прятать можно через стили. В tailwind есть классы для работы с разными размерами.

paqstd-dev · 2023-05-02T19:01:12Z

frontend/app/(main)/catalog/loading.tsx

+                  <SkeletonCard key={index} />
+                ))}
+              </div>
+              <Pagination />


Нельзя использовать интерактивные компоненты для loading ui, такие как Paginaton, Carousel и тд. Такие компоненты могут делать запросы в api, делать некоторые вычисления и тд.

Loading ui обычно должен содержать стили для блоков и сами блоки. Никакой сложной js/ts логики не хранит.

Тогда можно создавать стили для лоадинг в разметке или можно для него отдельный файл со стилями? в интернете встречала стили в разметке лоадинг.

В идеале, конечно, делать отдельно. Можно попробовать сделать к примеру loading.module.scss файл для таких стилей

all fixed

KarolinaEsepenok added 7 commits April 10, 2023 19:29

add: new features

8ce8374

Merge remote-tracking branch 'origin/frontend' into frontend

de89417

Merge branch 'frontend' of https://github.com/DJWOMS/GSpot into frontend

e1cca9c

add: new features

c9a4442

add: SkeletonGameCard/SkeletonGameBigCard

ccde243

fix: style SkeletonGameBigCard/SkeletonGameCard

0498539

add: SkeletonCard/SkeletonGameBigCard | loading files for main/catalo…

0dd09f3

…g/news

KarolinaEsepenok changed the base branch from main to frontend May 2, 2023 14:11

paqstd-dev previously requested changes May 2, 2023

View reviewed changes

KarolinaEsepenok added 11 commits May 3, 2023 13:27

fix: mistake

c72991d

Merge branch 'frontend' of https://github.com/DJWOMS/GSpot into frontend

52428c4

Merge branch 'frontend' into features/Loading

ffedc4d

add: skeletonTitle/ loading for details

94fc0bf

add: skeletonTitle/ loading for details

7e5d3aa

add: skeletons Components

37962af

Merge branch 'frontend' of https://github.com/DJWOMS/GSpot into frontend

af0d3ef

Merge branch 'frontend' into features/Loading

d8be225

add: skeleton Components

76d3c13

add: skeleton Components

3dfd8f4

add: skeleton Components

b2a82f2

KarolinaEsepenok closed this May 8, 2023

kieled reopened this May 8, 2023

kieled approved these changes May 8, 2023

View reviewed changes

kieled merged commit 90bfe57 into DJWOMS:frontend May 8, 2023

kieled added the frontend Frontend label label Jun 4, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Frontend | Features/loading #196

Frontend | Features/loading #196

KarolinaEsepenok commented May 2, 2023

paqstd-dev left a comment

paqstd-dev May 2, 2023

paqstd-dev May 2, 2023

paqstd-dev May 2, 2023

paqstd-dev May 2, 2023

KarolinaEsepenok May 3, 2023

KarolinaEsepenok May 3, 2023

paqstd-dev May 4, 2023

paqstd-dev May 2, 2023

KarolinaEsepenok May 3, 2023

paqstd-dev May 4, 2023

paqstd-dev May 2, 2023

paqstd-dev May 2, 2023

paqstd-dev May 2, 2023

KarolinaEsepenok May 3, 2023

paqstd-dev May 4, 2023

paqstd-dev May 2, 2023

KarolinaEsepenok May 3, 2023

paqstd-dev May 4, 2023

Frontend | Features/loading #196

Frontend | Features/loading #196

Conversation

KarolinaEsepenok commented May 2, 2023

paqstd-dev left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment