feat: skeleton loading

package.json

@@ -50,6 +50,7 @@
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.49.3",
     "react-icons": "^4.10.1",
+    "react-loading-skeleton": "^3.4.0",
     "react-redux": "^9.1.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "^5.0.1",

src/components/shared/index.js

@@ -9,3 +9,4 @@ export { default as Loading } from "./loading/Loading";
 export { default as Modal } from "./modal/Modal";
 export { default as Navbar } from "./navbar/Navbar";
 export { default as ProfileCompletion } from "./profileCompletion/ProfileCompletion";
+export { default as SkeletonCard } from "./skeleton/Skeleton";

src/components/shared/skeleton/Skeleton.css

@@ -0,0 +1,15 @@
+
+.skeleton-container{
+    margin:1em;
+    padding: 1em;
+    border-radius: 15px;
+    background-color: #f5f6fa;
+}
+.skeleton-footer{
+    display: flex;
+    justify-content: space-between;
+    /* padding-right: 1em; */
+    margin-top: 2em;
+    position: relative;
+    bottom: 0;
+}

src/components/shared/skeleton/Skeleton.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "./Skeleton.css";
+import "react-loading-skeleton/dist/skeleton.css";
+import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
+
+const SkeletonCard = () => {
+  return (
+    <SkeletonTheme baseColor="#bdc3c7" highlightColor="#f1f2f6">
+      <p style={{ height: "100%" }}>
+        <div className="skeleton-container">
+          <div className="grid-1">
+            {/* Image */}
+            <Skeleton width={290} count={1} height={150} />
+            <br />
+            {/* Tags */}
+            <Skeleton width={180} count={3} height={15} />
+          </div>
+          <div className="grid-2">
+            {/* Button */}
+            <div className="skeleton-footer">
+              <Skeleton width={210} count={1} height={35} />
+              <Skeleton width={50} count={1} height={35} />
+            </div>
+          </div>
+        </div>
+      </p>
+    </SkeletonTheme>
+  );
+};
+
+export default SkeletonCard;

src/pages/clubs/Clubs.jsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import useSWR from "swr";
-import { Footer, Navbar } from "../../components/shared";
+import { Footer, Navbar, SkeletonCard } from "../../components/shared";
 import ClubCard from "../../components/shared/cards/club/ClubCard";
 import { clubEndpoints } from "../../static/ApiEndpoints";
 import ComponentHelmet from "../../utils/ComponentHelmet";
@@ -9,8 +9,12 @@ import "./Clubs.css";
 
 const Clubs = () => {
   const { data: clubs } = useSWR(clubEndpoints.all, fetcher);
+  let [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
     window.scrollTo(0, 0);
   }, []);
 
@@ -22,9 +26,21 @@ const Clubs = () => {
       <main className="container">
         <div className="clubspage_main_parent">
           <div className="clubspage_cardsdiv">
-            {clubs?.map((club, id) => (
-              <ClubCard club={club} key={id} />
-            ))}
+            {loading ? (
+              <div
+                style={{
+                  display: "flex",
+                  width: "100%",
+                  justifyContent: "space-evenly",
+                }}
+              >
+                {" "}
+                <SkeletonCard /> <SkeletonCard /> <SkeletonCard />{" "}
+                <SkeletonCard />{" "}
+              </div>
+            ) : (
+              clubs?.map((club, id) => <ClubCard club={club} key={id} />)
+            )}
           </div>
         </div>
       </main>

src/pages/events/all/Events.jsx

@@ -4,7 +4,12 @@ import { useSelector } from "react-redux";
 import useSWR from "swr";
 import { EventsCard } from "../../../components/private";
 import CreateEvents from "../../../components/private/events/create/CreateEvents";
-import { Button, Footer, Navbar } from "../../../components/shared";
+import {
+  Button,
+  Footer,
+  Navbar,
+  SkeletonCard,
+} from "../../../components/shared";
 import { eventEndpoints } from "../../../static/ApiEndpoints";
 import ComponentHelmet from "../../../utils/ComponentHelmet";
 import fetcher from "../../../utils/Fetcher";
@@ -16,7 +21,12 @@ const Events = () => {
   const userType = useSelector((state) => state.user.userType);
   // const isLoggedIn = useSelector((state) => state.auth.isLoggedIn);
 
+  let [loading, setLoading] = useState(true);
+
   useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
     window.scrollTo(0, 0);
   }, []);
 
@@ -45,9 +55,23 @@ const Events = () => {
             )}
           </div>
           <div className="events_div">
-            {events?.map((event, id) => (
-              <EventsCard event={event} key={id} />
-            ))}
+            {/* <SkeletonCard/> */}
+            {/* loading? <SkeletonCard/> : */}
+            {loading ? (
+              <div
+                style={{
+                  display: "flex",
+                  width: "100%",
+                  justifyContent: "space-evenly",
+                }}
+              >
+                {" "}
+                <SkeletonCard /> <SkeletonCard /> <SkeletonCard />{" "}
+                <SkeletonCard />{" "}
+              </div>
+            ) : (
+              events?.map((event, id) => <EventsCard event={event} key={id} />)
+            )}
           </div>
         </div>
       </main>