feat(frontend): ✨ Create CartProduct loading skeleton component

WildCodeSchool · Jul 22, 2024 · bd79015 · bd79015
1 parent 8fa9986
commit bd79015
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 26 deletions.
diff --git a/frontend/src/components/cards/product-rent/CardProductRent.tsx b/frontend/src/components/cards/product-rent/CardProductRent.tsx
@@ -53,7 +53,7 @@ const CardProductRent = ({
   return (
     <article className="relative flex flex-col gap-4 rounded-md bg-lowcontrast p-4">
       <Link className="flex gap-4" href={`/products/${id}`}>
-        <section className="relative aspect-square h-80 w-80 overflow-hidden rounded-lg bg-zinc-300">
+        <section className="relative aspect-square h-80 w-80 overflow-hidden rounded-lg">
           <img
             src={picture[0]}
             alt={"Image de " + name}
@@ -80,15 +80,15 @@ const CardProductRent = ({
               </div>
               <div className="flex flex-col border-l-4 border-warning px-3 py-1">
                 <h1 className="text-lg font-semibold text-hightcontrast">
-                  {name || <em>NO TITLE...</em>}
+                  {name}
                 </h1>
                 {category && <CategoryLink category={category} />}
               </div>
             </section>
 
             <section className="flex flex-col gap-3">
               <p className="text-base font-medium opacity-70">
-                {description_short || <em>NO DESCRIPTION...</em>}
+                {description_short}
               </p>
             </section>
           </div>

diff --git a/frontend/src/components/cards/product-rent/CardProductSkeleton.tsx b/frontend/src/components/cards/product-rent/CardProductSkeleton.tsx
@@ -0,0 +1,51 @@
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
+
+const CardProductSkeleton = () => {
+  return (
+    <SkeletonTheme baseColor="#202020" highlightColor="#444">
+      <article className="relative flex flex-col gap-4 rounded-md bg-lowcontrast p-4">
+        <div className="flex gap-4">
+          <section className="relative aspect-square h-80 w-80 overflow-hidden rounded-lg">
+            <Skeleton height="100%" width="100%" />
+          </section>
+          <div className="flex grow flex-col gap-10">
+            <div className="flex h-full flex-col gap-3">
+              <section className="flex flex-col gap-3">
+                <div className="flex items-center justify-end gap-3">
+                  <div className="flex w-max items-center justify-center rounded px-3 py-1">
+                    <Skeleton width={100} height={20} />
+                  </div>
+                </div>
+                <div className="flex flex-col border-l-4 border-warning px-3 py-1">
+                  <Skeleton height={25} width="75%" />
+                  <Skeleton
+                    height={20}
+                    width="25%"
+                    style={{ marginTop: "8px" }}
+                  />
+                </div>
+              </section>
+
+              <section className="flex flex-col gap-3">
+                <Skeleton height={20} width="100%" />
+                <Skeleton height={20} width="75%" />
+                <Skeleton height={20} width="67%" />
+              </section>
+            </div>
+            <div className="flex grow basis-0 flex-col items-start justify-end">
+              <div className="mb-2 w-1/2">
+                <Skeleton height={35} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="h-8 w-full rounded-sm">
+          <Skeleton height={"100%"} />
+        </div>
+      </article>
+    </SkeletonTheme>
+  );
+};
+
+export default CardProductSkeleton;
diff --git a/frontend/src/components/ui/LoadingButton.tsx b/frontend/src/components/ui/LoadingButton.tsx
@@ -22,7 +22,7 @@ const LoadingButton = () => {
           fill="currentColor"
         />
       </svg>
-      Loading...
+      Chargement...
     </button>
   );
 };

diff --git a/frontend/src/containers/public/home/hot-products-section.tsx b/frontend/src/containers/public/home/hot-products-section.tsx
@@ -3,8 +3,8 @@ import DisplayProd from "components/DisplayProd";
 import { GET_PRODUCTS } from "lib/graphql/queries";
 import { HiPlusCircle } from "react-icons/hi";
 
+import CardProductSkeleton from "components/cards/product-rent/CardProductSkeleton";
 import { useEffect } from "react";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import styles from "styles/pages/ProductsPage.module.scss";
 
@@ -25,15 +25,9 @@ const HomeHotProductsSection = () => {
           </h2>
         </div>
         <main className={styles.productsPage}>
-          <div className="grid grid-cols-2 gap-6 lg:grid-cols-2">
+          <div className="grid grid-cols-2 gap-4 lg:grid-cols-2">
             {[...Array(4)].map((_, index) => (
-              <SkeletonTheme
-                key={index}
-                baseColor="#202020"
-                highlightColor="#444"
-              >
-                <Skeleton height={300} width={600} />
-              </SkeletonTheme>
+              <CardProductSkeleton key={index} />
             ))}
           </div>
         </main>
@@ -46,17 +40,19 @@ const HomeHotProductsSection = () => {
   const products = data.getAllproducts;
 
   return (
-    <section className="mt-32 flex flex-col gap-2">
-      <div className="fit-content mb-4 flex">
-        <HiPlusCircle className="mr-2 text-4xl text-blue-500" />
-        <h2 className="w-fit border-b-2 border-b-blue-500 text-2xl font-bold">
-          Les nouveautés
-        </h2>
-      </div>
-      <main className={styles.productsPage}>
-        <DisplayProd products={products} />
-      </main>
-    </section>
+    <>
+      <section className="mt-32 flex flex-col gap-2">
+        <div className="fit-content mb-4 flex">
+          <HiPlusCircle className="mr-2 text-4xl text-blue-500" />
+          <h2 className="w-fit border-b-2 border-b-blue-500 text-2xl font-bold">
+            Les nouveautés
+          </h2>
+        </div>
+        <main className={styles.productsPage}>
+          <DisplayProd products={products} />
+        </main>
+      </section>
+    </>
   );
 };
 

diff --git a/frontend/src/containers/public/home/summer-products.tsx b/frontend/src/containers/public/home/summer-products.tsx
@@ -1,13 +1,29 @@
 import { useQuery } from "@apollo/client";
 import CardProductRent from "components/cards/product-rent/CardProductRent";
-import LoadingProgress from "components/ui/LoadingProgress";
+import CardProductSkeleton from "components/cards/product-rent/CardProductSkeleton";
 import { GET_PRODUCTS } from "lib/graphql/queries";
 import { LuSun } from "react-icons/lu";
 
 const HomeHotProductsSection = () => {
   const { data, loading, error } = useQuery(GET_PRODUCTS);
 
-  if (loading) return <LoadingProgress />;
+  if (loading) {
+    return (
+      <section className="mt-32 flex flex-col gap-2">
+        <div className="justifiy-center fit-content mb-4 flex">
+          <LuSun className="mr-2 text-4xl text-yellow-200" />
+          <h2 className="w-fit items-center border-b-2 border-b-yellow-200 text-2xl font-bold">
+            Parfait pour l&apos;été
+          </h2>
+        </div>
+        <main className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          {[...Array(4)].map((_, index) => (
+            <CardProductSkeleton key={index} />
+          ))}
+        </main>
+      </section>
+    );
+  }
   if (error) return <p>Error: {error.message}</p>;
 
   const products = data.getAllproducts;