From 095cab1847b54674662e129c4224832faa372ded Mon Sep 17 00:00:00 2001 From: Piyush-Linux Date: Mon, 18 Mar 2024 12:46:38 +0530 Subject: [PATCH 1/5] feat: skeleton loading --- package.json | 1 + src/components/shared/index.js | 1 + src/components/shared/skeleton/Skeleton.css | 15 ++++++++++ src/components/shared/skeleton/Skeleton.jsx | 31 ++++++++++++++++++++ src/pages/clubs/Clubs.jsx | 26 +++++++++++++---- src/pages/events/all/Events.jsx | 32 ++++++++++++++++++--- 6 files changed, 97 insertions(+), 9 deletions(-) create mode 100644 src/components/shared/skeleton/Skeleton.css create mode 100644 src/components/shared/skeleton/Skeleton.jsx diff --git a/package.json b/package.json index 82bb6e69..11616513 100644 --- a/package.json +++ b/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", diff --git a/src/components/shared/index.js b/src/components/shared/index.js index 668310a6..18dab934 100644 --- a/src/components/shared/index.js +++ b/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"; diff --git a/src/components/shared/skeleton/Skeleton.css b/src/components/shared/skeleton/Skeleton.css new file mode 100644 index 00000000..34227f56 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/components/shared/skeleton/Skeleton.jsx b/src/components/shared/skeleton/Skeleton.jsx new file mode 100644 index 00000000..46afa7a9 --- /dev/null +++ b/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 ( + +

+

+
+ {/* Image */} + +
+ {/* Tags */} + +
+
+ {/* Button */} +
+ + +
+
+
+

+ + ); +}; + +export default SkeletonCard; diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx index 1739ee5c..4fe34d92 100644 --- a/src/pages/clubs/Clubs.jsx +++ b/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 = () => {
- {clubs?.map((club, id) => ( - - ))} + {loading ? ( +
+ {" "} + {" "} + {" "} +
+ ) : ( + clubs?.map((club, id) => ) + )}
diff --git a/src/pages/events/all/Events.jsx b/src/pages/events/all/Events.jsx index cb6059ac..a433134f 100644 --- a/src/pages/events/all/Events.jsx +++ b/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 = () => { )}
- {events?.map((event, id) => ( - - ))} + {/* */} + {/* loading? : */} + {loading ? ( +
+ {" "} + {" "} + {" "} +
+ ) : ( + events?.map((event, id) => ) + )}
From 501654ae9b48e8962256d1374e9d8f957c10e47c Mon Sep 17 00:00:00 2001 From: Piyush Date: Sat, 30 Mar 2024 14:56:13 +0530 Subject: [PATCH 2/5] Update src/pages/events/all/Events.jsx Co-authored-by: Tinesh Nehete <74779225+Tineshnehete@users.noreply.github.com> --- src/pages/events/all/Events.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/events/all/Events.jsx b/src/pages/events/all/Events.jsx index 503fd1ac..7033b505 100644 --- a/src/pages/events/all/Events.jsx +++ b/src/pages/events/all/Events.jsx @@ -23,9 +23,6 @@ const Events = () => { let [loading, setLoading] = useState(true); useEffect(() => { - setTimeout(() => { - setLoading(false); - }, 1000); window.scrollTo(0, 0); }, []); From f804a696a005205946eda6ae271bcfa5a0bf8c01 Mon Sep 17 00:00:00 2001 From: Piyush Date: Sat, 30 Mar 2024 14:56:31 +0530 Subject: [PATCH 3/5] Update src/pages/clubs/Clubs.jsx Co-authored-by: Tinesh Nehete <74779225+Tineshnehete@users.noreply.github.com> --- src/pages/clubs/Clubs.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx index 4fe34d92..d0b0cdd2 100644 --- a/src/pages/clubs/Clubs.jsx +++ b/src/pages/clubs/Clubs.jsx @@ -8,8 +8,7 @@ import fetcher from "../../utils/Fetcher"; import "./Clubs.css"; const Clubs = () => { - const { data: clubs } = useSWR(clubEndpoints.all, fetcher); - let [loading, setLoading] = useState(true); + const { data: clubs, isLoading:loading } = useSWR(clubEndpoints.all, fetcher); useEffect(() => { setTimeout(() => { From b5e332430e0fe35c9251b5f5c215b109fd4b5dc8 Mon Sep 17 00:00:00 2001 From: Piyush Date: Sat, 30 Mar 2024 14:57:53 +0530 Subject: [PATCH 4/5] Update src/pages/clubs/Clubs.jsx Co-authored-by: Tinesh Nehete <74779225+Tineshnehete@users.noreply.github.com> --- src/pages/clubs/Clubs.jsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/pages/clubs/Clubs.jsx b/src/pages/clubs/Clubs.jsx index d0b0cdd2..219ff1d2 100644 --- a/src/pages/clubs/Clubs.jsx +++ b/src/pages/clubs/Clubs.jsx @@ -11,9 +11,6 @@ const Clubs = () => { const { data: clubs, isLoading:loading } = useSWR(clubEndpoints.all, fetcher); useEffect(() => { - setTimeout(() => { - setLoading(false); - }, 5000); window.scrollTo(0, 0); }, []); From a4df718a73f26b4200ac93b477f46d40e860832d Mon Sep 17 00:00:00 2001 From: Piyush-Linux Date: Sat, 30 Mar 2024 15:05:10 +0530 Subject: [PATCH 5/5] feat: event page skeleton loading --- src/pages/events/all/Events.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/events/all/Events.jsx b/src/pages/events/all/Events.jsx index 7033b505..44a773bb 100644 --- a/src/pages/events/all/Events.jsx +++ b/src/pages/events/all/Events.jsx @@ -16,12 +16,13 @@ import fetcher from "../../../utils/Fetcher"; import "./Events.scss"; const Events = () => { - const { data: events } = useSWR(eventEndpoints.all, fetcher); + const { data: events, isLoading: loading } = useSWR( + eventEndpoints.all, + fetcher, + ); const [showCreateModal, setshowCreateModal] = useState(false); const userType = useSelector((state) => state.user.userType); - let [loading, setLoading] = useState(true); - useEffect(() => { window.scrollTo(0, 0); }, []); @@ -57,7 +58,6 @@ const Events = () => {
{/* */} - {/* loading? : */} {loading ? (