feat(frontend): ✨ Add Skeleton on loading of product

WildCodeSchool · Jul 21, 2024 · b16023b · b16023b
1 parent d2baa17
commit b16023b
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -26,6 +26,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.51.0",
     "react-icons": "^5.0.1",
+    "react-loading-skeleton": "^3.4.0",
     "react-toastify": "^10.0.5",
     "tailwind-merge": "^2.2.1",
     "tw-colors": "^3.3.1"

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/containers/public/home/hot-products-section.tsx b/frontend/src/containers/public/home/hot-products-section.tsx
@@ -1,24 +1,49 @@
 import { useQuery } from "@apollo/client";
 import DisplayProd from "components/DisplayProd";
-import LoadingProgress from "components/ui/LoadingProgress";
 import { GET_PRODUCTS } from "lib/graphql/queries";
 import { HiPlusCircle } from "react-icons/hi";
-
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+import "react-loading-skeleton/dist/skeleton.css";
 import styles from "styles/pages/ProductsPage.module.scss";
 
 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="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}>
+          <div className="grid grid-cols-2 gap-6 lg:grid-cols-2">
+            {[...Array(4)].map((_, index) => (
+              <SkeletonTheme
+                key={index}
+                baseColor="#202020"
+                highlightColor="#444"
+              >
+                <Skeleton height={300} width={600} />
+              </SkeletonTheme>
+            ))}
+          </div>
+        </main>
+      </section>
+    );
+  }
+
   if (error) return <p>Error: {error.message}</p>;
 
   const products = data.getAllproducts;
 
   return (
     <section className="mt-32 flex flex-col gap-2">
-      <div className="justifiy-center fit-content mb-4 flex">
+      <div className="fit-content mb-4 flex">
         <HiPlusCircle className="mr-2 text-4xl text-blue-500" />
-        <h2 className="w-fit items-center border-b-2 border-b-blue-500 text-2xl font-bold">
+        <h2 className="w-fit border-b-2 border-b-blue-500 text-2xl font-bold">
           Les nouveautés
         </h2>
       </div>