Frontend | Features/loading

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

@@ -0,0 +1,30 @@
+import React from 'react'
+import Section from 'components/Section'
+import { SkeletonInput, SkeletonTitle } from 'components/Skeleton'
+import { SkeletonCard } from 'components/Skeleton'
+import s from './page.module.css'
+
+export default function Loading() {
+  return (
+    <>
+      <Section />
+      <Section last>
+        <SkeletonTitle />
+        <div className={s.row}>
+          <div className={s.columns2}>
+            {[...new Array(17)].map((_, index) => (
+              <SkeletonInput size={'44'} key={index} />
+            ))}
+          </div>
+          <div className={s.columns10}>
+            <div className={s.list}>
+              {[...new Array(11)].map((_, index) => (
+                <SkeletonCard key={index} />
+              ))}
+            </div>
+          </div>
+        </div>
+      </Section>
+    </>
+  )
+}

frontend/app/(main)/details/loading.module.css

@@ -0,0 +1,44 @@
+.details {
+  @apply w-full animate-pulse;
+  &Card {
+    @apply flex animate-pulse flex-wrap max-sm:flex-col;
+    &Img {
+      @apply mb-2 h-[340px] w-[240px]  rounded-lg bg-gray-700 max-[500px]:w-full;
+    }
+    &Desc {
+      @apply ml-3 w-3/5;
+      &Title {
+        @apply mb-2 h-6 w-2/12 rounded-lg bg-gray-700;
+      }
+      &Text {
+        @apply mb-2 h-3 w-6/12 rounded-lg bg-gray-700;
+      }
+    }
+    &Info {
+      @apply ml-3 w-52 max-sm:ml-0 max-[500px]:w-full;
+      &Title {
+        @apply mb-2 h-6 w-6/12 rounded-lg bg-gray-700;
+      }
+      &Text {
+        @extend .detailsCardInfoTitle;
+        @apply mb-2 h-3 w-7/12;
+      }
+      &Btn {
+        @extend .detailsCardInfoTitle;
+        @apply mt-3 h-11 w-full;
+      }
+    }
+  }
+  &Text {
+    @apply my-11 w-full;
+    &Line {
+      @apply my-2 h-3 rounded bg-gray-700 even:mb-5 even:w-10/12;
+    }
+  }
+  &Content {
+    &Line {
+      @extend .detailsTextLine;
+      @apply even:mb-0;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+import React from 'react'
+import s from 'app/(main)/details/loading.module.css'
+import Section from 'components/Section'
+import { SkeletonInput } from 'components/Skeleton'
+
+export default function Loading() {
+  return (
+    <Section>
+      <div className={s.details}>
+        <div className={s.detailsCard}>
+          <div className={s.detailsCardImg} />
+          <div className={s.detailsCardDesc}>
+            <div className={s.detailsCardDescTitle} />
+            {[...new Array(5)].map((_, index) => (
+              <div className={s.detailsCardDescText} key={index} />
+            ))}
+          </div>
+          <div className={s.detailsCardInfo}>
+            <div className={s.detailsCardInfoText} />
+            {[...new Array(3)].map((_, index) => (
+              <div className={s.detailsCardInfoTitle} key={index} />
+            ))}
+            <div className={s.detailsCardInfoText} />
+            <div className={s.detailsCardInfoTitle} />
+            {[...new Array(2)].map((_, index) => (
+              <div className={s.detailsCardInfoBtn} key={index} />
+            ))}
+          </div>
+        </div>
+
+        <div className={s.detailsText}>
+          {[...new Array(10)].map((_, index) => (
+            <div className={s.detailsTextLine} key={index} />
+          ))}
+        </div>
+        <div className={s.detailsContent}>
+          <SkeletonInput size={'44'} />
+          {[...new Array(7)].map((_, index) => (
+            <div className={s.detailsContentLine} key={index} />
+          ))}
+        </div>
+      </div>
+    </Section>
+  )
+}

frontend/app/(main)/loading.module.css

@@ -0,0 +1,6 @@
+.bestGames {
+  @apply mt-3 grid grid-cols-2 gap-4 max-[1200px]:grid-cols-1 max-sm:grid-cols-2 max-[500px]:grid-cols-1;
+}
+.card {
+  @apply mt-3 grid grid-cols-5 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-[500px]:grid-cols-1;
+}

frontend/app/(main)/loading.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import s from 'app/(main)/loading.module.css'
+import Section from 'components/Section'
+import { SkeletonCard } from 'components/Skeleton'
+import { SkeletonGameBigCard } from 'components/Skeleton'
+import { SkeletonTitle } from 'components/Skeleton'
+
+export default function Loading() {
+  return (
+    <>
+      <Section />
+      <SkeletonTitle />
+      <div className={s.bestGames}>
+        {[...new Array(2)].map((_, index) => (
+          <SkeletonGameBigCard key={index} />
+        ))}
+      </div>
+      <Section />
+      <SkeletonTitle />
+      <div className={s.card}>
+        {[...new Array(10)].map((_, index) => (
+          <SkeletonCard key={index} />
+        ))}
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,20 @@
+import React from 'react'
+import Section from 'components/Section'
+import { SkeletonCard, SkeletonInput, SkeletonTitle } from 'components/Skeleton'
+import s from './page.module.css'
+
+export default function Loading() {
+  return (
+    <Section>
+      <section className="section section--last section--catalog">
+        <SkeletonTitle />
+        <SkeletonInput size={'full'} />
+        <div className={s.columns}>
+          {[...new Array(11)].map((_, index) => (
+            <SkeletonCard key={index} />
+          ))}
+        </div>
+      </section>
+    </Section>
+  )
+}

frontend/components/CheckAge/CheckAge.tsx

@@ -3,7 +3,7 @@ import DatePicker from 'react-datepicker'
 import 'react-datepicker/dist/react-datepicker.css'
 import cn from 'classnames'
 import Image from 'next/image'
-import styles from './CheckAge.module.scss'
+import styles from './CheckAge.module.css'
 
 const CheckAge = () => {
   const [startDay, setStartDay] = useState(new Date())

frontend/components/Skeleton/SkeletonCard/SkeletonCard.module.css

@@ -0,0 +1,13 @@
+.card {
+  @apply mb-7 animate-pulse max-[500px]:w-full;
+  &Img {
+    @apply mb-2 h-[340px] w-full rounded-lg bg-gray-700;
+  }
+  &Text {
+    @apply mb-2 h-3 w-3/4 rounded-lg bg-gray-700;
+  }
+  &Btn {
+    @extend .cardText;
+    @apply h-11;
+  }
+}

frontend/components/Skeleton/SkeletonCard/SkeletonCard.tsx

@@ -0,0 +1,15 @@
+import s from 'components/Skeleton/SkeletonCard/SkeletonCard.module.css'
+
+const SkeletonCard = () => {
+  return (
+    <div className={s.card}>
+      <div className={s.cardImg} />
+      {[...new Array(2)].map((_, index) => (
+        <div className={s.cardText} key={index} />
+      ))}
+      <div className={s.cardBtn} />
+    </div>
+  )
+}
+
+export { SkeletonCard }

frontend/components/Skeleton/SkeletonCard/index.ts

@@ -0,0 +1 @@
+export { SkeletonCard } from './SkeletonCard'

frontend/components/Skeleton/SkeletonGameBigCard/SkeletonGameBigCard.module.css

@@ -0,0 +1,26 @@
+.card {
+  @apply flex animate-pulse max-sm:flex-col;
+
+  &Img {
+    @apply mb-2 h-[340px] w-[240px] rounded-lg bg-gray-700 max-[500px]:w-full;
+  }
+
+  &Info {
+    @apply ml-3 w-72 max-sm:ml-0 max-[500px]:w-full;
+    &Title {
+      @apply mb-2 h-6 w-1/2 rounded-lg bg-gray-700;
+    }
+    &Text {
+      @extend .cardInfoTitle;
+      @apply h-3 w-7/12;
+    }
+    &Price {
+      @extend .cardInfoTitle;
+      @apply mt-40 max-sm:mt-3;
+    }
+    &Btn {
+      @extend .cardInfoTitle;
+      @apply h-11;
+    }
+  }
+}

frontend/components/Skeleton/SkeletonGameBigCard/SkeletonGameBigCard.tsx

@@ -0,0 +1,20 @@
+import s from 'components/Skeleton/SkeletonGameBigCard/SkeletonGameBigCard.module.css'
+
+const SkeletonGameBigCard = () => {
+  return (
+    <div className={s.card}>
+      <div className={s.cardImg} />
+      <div className={s.cardInfo}>
+        <div className={s.cardInfoTitle} />
+        {[...new Array(3)].map((_, index) => (
+          <div className={s.cardInfoText} key={index} />
+        ))}
+        <div className={s.cardInfoPrice} />
+        <div className={s.cardInfoText} />
+        <div className={s.cardInfoBtn} />
+      </div>
+    </div>
+  )
+}
+
+export { SkeletonGameBigCard }

frontend/components/Skeleton/SkeletonGameBigCard/index.ts

@@ -0,0 +1 @@
+export { SkeletonGameBigCard } from './SkeletonGameBigCard'

frontend/components/Skeleton/SkeletonTitle/SkeletonTitle.module.css

@@ -0,0 +1,6 @@
+.animate {
+  @apply mb-6 animate-pulse;
+}
+.line {
+  @apply my-3 h-9 w-80 rounded bg-gray-700;
+}

frontend/components/Skeleton/SkeletonTitle/SkeletonTitle.tsx

@@ -0,0 +1,11 @@
+import s from 'components/Skeleton/SkeletonTitle/SkeletonTitle.module.css'
+
+const SkeletonTitle = () => {
+  return (
+    <div className={s.animate}>
+      <div className={s.line} />
+    </div>
+  )
+}
+
+export { SkeletonTitle }

frontend/components/Skeleton/SkeletonTitle/index.ts

@@ -0,0 +1 @@
+export { SkeletonTitle } from './SkeletonTitle'

frontend/components/Skeleton/index.ts

@@ -2,3 +2,6 @@ export * from './SkeletonListCheckBoxes'
 export * from './SkeletonSelect'
 export * from './SkeletonInput'
 export * from './SkeletonCheckBox'
+export * from './SkeletonCard'
+export * from './SkeletonGameBigCard'
+export * from './SkeletonTitle'