feat: Added skeleton loading component

Author: druvkotwani

client/src/app/components/GenerateStats.tsx

@@ -3,15 +3,18 @@ import React, { useContext, useState } from "react";
 import Card from "./Card";
 import Image from "next/image";
 import { data as defaultData } from "./Card";
-import { toast, ToastContainer } from "react-toastify";
+import { toast } from "react-toastify";
 import { DataContext } from "../context/DataContext";
+import Skeleton from "./Skeleton";
 
 const GenerateStats = ({ showStats, setShowStats }: any) => {
   const { datas, setDatas } = useContext(DataContext);
   const [username, setUsername] = useState("");
   const [data, setData] = useState<any>(defaultData);
+  const [loading, setLoading] = useState(false);
 
   const generateStats = (e: React.FormEvent) => {
+    setLoading(true);
     e.preventDefault();
 
     if (!username) {
@@ -24,6 +27,7 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
         .then((data) => {
           setData(data);
           toast("🫡Stats generated successfully");
+          setLoading(false);
         });
     } catch (error) {
       console.error("An error occurred. Please try again later");
@@ -68,7 +72,13 @@ const GenerateStats = ({ showStats, setShowStats }: any) => {
           onClick={(e) => e.stopPropagation()}
           className="px-4 flex items-center justify-center flex-col gap-4"
         >
-          <Card userData={data} />
+          {loading ? (
+            <>
+              <Skeleton />
+            </>
+          ) : (
+            <Card userData={data} />
+          )}
 
           <form
             onSubmit={generateStats}

client/src/app/components/PromotionCard.tsx

@@ -43,7 +43,7 @@ const PromotionCard = () => {
       target="_blank"
       className="hover:scale-105 transition-all ease-in-out duration-300 font-sourcecodepro "
     >
-      <div className="flex justify-betwen flex-col  items-center rounded h-[280px] border-2 border-[#f7f7f7] ">
+      <div className="flex justify-betwen max-w-[400px] flex-col  items-center rounded h-[280px] border-2 border-[#f7f7f7] ">
         {/* Heading and Logo */}
         <div className="flex gap-1 xl:gap-4 items-center justify-between   ">
           <div className="flex items-center text-white justify-center px-4 py-2 w-full gap-2   rounded-md">

client/src/app/components/Skeleton.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const Skeleton = () => {
+  return (
+    <div
+      role="status"
+      className="max-w-[400px] lg:w-[400px] rounded min-h-[280px] p-4 border border-gray-200 shadow animate-pulse md:p-6 dark:border-gray-700"
+    >
+      <div className="flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700">
+        <svg
+          className="w-10 h-10 text-gray-200 dark:text-gray-600"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          viewBox="0 0 16 20"
+        >
+          <path d="M14.066 0H7v5a2 2 0 0 1-2 2H0v11a1.97 1.97 0 0 0 1.934 2h12.132A1.97 1.97 0 0 0 16 18V2a1.97 1.97 0 0 0-1.934-2ZM10.5 6a1.5 1.5 0 1 1 0 2.999A1.5 1.5 0 0 1 10.5 6Zm2.221 10.515a1 1 0 0 1-.858.485h-8a1 1 0 0 1-.9-1.43L5.6 10.039a.978.978 0 0 1 .936-.57 1 1 0 0 1 .9.632l1.181 2.981.541-1a.945.945 0 0 1 .883-.522 1 1 0 0 1 .879.529l1.832 3.438a1 1 0 0 1-.031.988Z" />
+          <path d="M5 5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707A2.98 2.98 0 0 0 .13 5H5Z" />
+        </svg>
+      </div>
+      <div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-full min-w-[300px]  mb-4"></div>
+
+      <div className="h-2 bg-gray-200 rounded-full dark:bg-gray-700"></div>
+    </div>
+  );
+};
+
+export default Skeleton;

client/src/app/page.tsx

@@ -10,6 +10,7 @@ import PromotionCard from "./components/PromotionCard";
 import { DataContext } from "./context/DataContext";
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import Skeleton from "./components/Skeleton";
 
 export default function Home() {
   const { datas, setDatas } = useContext(DataContext);
@@ -31,7 +32,7 @@ export default function Home() {
 
   useEffect(() => {
     fetchData();
-  }, [datas]);
+  }, [datas.length]);
 
   const searchedData = datas?.filter((data: any) =>
     data.profileData.fullName.toLowerCase().includes(search.toLowerCase())
@@ -57,7 +58,14 @@ export default function Home() {
 
       <div className="mt-32  max-w-7xl mx-auto  place-items-center grid grid-cols-1 md:grid-cols-2 gap-y-8 xl:grid-cols-3 font-sourcecodepro gap-x-4">
         <PromotionCard />
-        {searchedData &&
+        {loading ? (
+          <>
+            {Array.from({ length: 6 }, (_, i) => (
+              <Skeleton key={i} />
+            ))}
+          </>
+        ) : (
+          searchedData &&
           searchedData
             .sort(
               (a: any, b: any) =>
@@ -66,7 +74,8 @@ export default function Home() {
             )
             .map((userData: any, index: number) => (
               <Card userData={userData} index={index} key={index} />
-            ))}
+            ))
+        )}
       </div>
 
       <Footer />