Skip to content

Commit 25f3466

Browse files
deepanshu-prajapati01deepanshu-prajapati01
authored
Replaced Bouncing Loader with Skeleton Loader – Closes #1156 (#1157)
* Replaced loader with skeleton in the latest projects part * added skeleton for trending projects - don't know about the structure but added the same skeleton * fixed skeleton for tending project in both the places * Added skeleton in the /project/[PROJECTID] page * Refactor structure with cleaner and reusable skeleton code
1 parent 833d525 commit 25f3466

File tree

5 files changed

+122
-4
lines changed

5 files changed

+122
-4
lines changed

‎frontend/src/components/skeletons/LatestProjectsSkeleton.jsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react'
2+
3+
const LatestProjectsSkeleton = () => {
4+
return (
5+
<div className="flex flex-col space-y-2">
6+
{[...Array(3)].map((temp) => (
7+
<div key={temp} className="w-full p-4 bg-[#f5f5f5] dark:bg-[#151515] rounded-md animate-pulse space-y-4">
8+
{/* Header Section */}
9+
<div className="flex items-center space-x-4">
10+
<div className="w-10 h-10 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded-full"></div>
11+
<div className="flex-1 flex items-center space-x-3">
12+
<div className="w-32 h-4 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
13+
<div className="w-24 h-4 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
14+
</div>
15+
</div>
16+
17+
{/* Body Section */}
18+
<div className="flex justify-between items-start w-full max-w-3xl p-4 bg-[#f5f5f5] dark:bg-[#151515] rounded-md animate-pulse">
19+
<div className="flex-1 pr-4 space-y-3">
20+
<div className="h-8 w-2/3 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
21+
<div className="h-4 w-5/6 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
22+
<div className="h-4 w-5/6 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
23+
</div>
24+
<div className="w-28 h-24 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded-md flex-shrink-0"></div>
25+
</div>
26+
27+
{/* Footer Section */}
28+
<div className="flex items-center space-x-4">
29+
<div className="w-12 h-8 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded-full"></div>
30+
<div className="w-8 h-8 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded-full"></div>
31+
</div>
32+
</div>
33+
34+
))}
35+
</div>
36+
)
37+
}
38+
39+
export default LatestProjectsSkeleton

‎frontend/src/components/skeletons/ProjectLoadingSkeleton.jsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React from 'react'
2+
3+
const ProjectLoadingSkeleton = () => {
4+
return (
5+
<div className="mx-auto max-w-[900px] py-10 max-lg:px-[5vw] animate-pulse">
6+
<div className="my-8 flex max-sm:flex-col justify-between sm:items-center">
7+
<div className="bg-gray-300 dark:bg-gray-700 h-10 w-[60%] rounded-md"></div>
8+
<div className="flex items-center gap-4 mt-4 sm:mt-2">
9+
<div className="h-9 w-20 bg-gray-300 dark:bg-gray-700 rounded-md"></div>
10+
<div className="h-9 w-20 bg-gray-300 dark:bg-gray-700 rounded-md"></div>
11+
</div>
12+
</div>
13+
14+
<div className="bg-gray-300 dark:bg-gray-700 aspect-video w-full rounded-md"></div>
15+
16+
<div className="flex max-sm:flex-col justify-between my-12">
17+
<div className="flex gap-5 items-start">
18+
<div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
19+
<div className="space-y-2">
20+
<div className="h-4 w-32 bg-gray-300 dark:bg-gray-700 rounded-md"></div>
21+
<div className="h-4 w-20 bg-gray-300 dark:bg-gray-700 rounded-md"></div>
22+
</div>
23+
</div>
24+
<div className="h-4 w-40 bg-gray-300 dark:bg-gray-700 rounded-md max-sm:mt-6 max-sm:ml-12 max-sm:pl-5"></div>
25+
</div>
26+
27+
{/* <div className="h-10 bg-gray-300 dark:bg-gray-700 rounded-md w-full my-6"></div> */}
28+
29+
{[...Array(3)].map((_, i) => (
30+
<div key={i} className="space-y-3">
31+
<div className="flex justify-between space-x-4 border-y-2 border-x-0 py-2 my-2 border-y-gray-300 dark:border-y-gray-700">
32+
<div className="flex items-center space-x-4">
33+
<div className="size-10 rounded-2xl bg-gray-300 dark:bg-gray-700"></div>
34+
<div className="size-10 rounded-2xl bg-gray-300 dark:bg-gray-700"></div>
35+
</div>
36+
<div className="size-10 rounded-2xl bg-gray-300 dark:bg-gray-700"></div>
37+
38+
</div>
39+
<div className="h-10 my-10 bg-gray-300 dark:bg-gray-700 rounded w-[80%]"></div>
40+
41+
</div>
42+
))}
43+
</div>
44+
)
45+
}
46+
47+
export default ProjectLoadingSkeleton

‎frontend/src/components/skeletons/TrendingProjectsSkeleton.jsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
const TrendingProjectsSkeleton = () => {
3+
return (
4+
<div className="flex flex-col space-y-2">
5+
{[...Array(3)].map((temp) => (
6+
<div key={temp} className="w-full p-4 bg-[#f5f5f5] dark:bg-[#151515] rounded-md animate-pulse space-y-4">
7+
{/* Header Section */}
8+
<div className="flex items-center space-x-4">
9+
<div className="size-10 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded-xl"></div>
10+
<div className="size-10 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded-full"></div>
11+
<div className="flex-1 flex items-center space-x-3">
12+
<div className="w-32 h-4 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
13+
<div className="w-24 h-4 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
14+
</div>
15+
</div>
16+
17+
{/* Body Section */}
18+
<div className="h-8 w-2/3 ml-14 bg-[#d4d4d4] dark:bg-[#2a2a2a] rounded"></div>
19+
</div>
20+
))}
21+
</div>
22+
)
23+
}
24+
25+
export default TrendingProjectsSkeleton

‎frontend/src/pages/Home.jsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import MinimalProjectPost from "../components/NoBannerProjectPost";
88
import NoDataMessage from "../components/NoData";
99
import { filterPaginationData } from "../common/filter-pagination-data";
1010
import LoadMoreDataBtn from "../components/LoadMoreData";
11+
import LatestProjectsSkeleton from "../components/skeletons/LatestProjectsSkeleton";
12+
import TrendingProjectsSkeleton from "../components/skeletons/TrendingProjectsSkeleton";
1113

1214
const Home = () => {
1315

@@ -96,7 +98,7 @@ const Home = () => {
9698
<>
9799
{
98100
projects === null ? (
99-
<Loader />
101+
<LatestProjectsSkeleton />
100102
) : (
101103
projects && projects.results.length ?
102104
projects.results.map((project, i) => {
@@ -113,7 +115,7 @@ const Home = () => {
113115
</>
114116
{
115117
trendingProjects === null ? (
116-
<Loader />
118+
<TrendingProjectsSkeleton />
117119
) : (
118120
trendingProjects.length ?
119121
trendingProjects.map((project, i) => {
@@ -153,7 +155,7 @@ const Home = () => {
153155

154156
{
155157
trendingProjects === null ? (
156-
<Loader />
158+
<TrendingProjectsSkeleton />
157159
) : (
158160
trendingProjects.length ?
159161
trendingProjects.map((project, i) => {

‎frontend/src/pages/Project.jsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ProjectInteraction from "../components/ProjectInteraction";
88
import ProjectPostCard from "../components/ProjectPostCard";
99
import ProjectContent from "../components/ProjectContent";
1010
import CommentsContainer, { fetchComments } from "../components/Comments";
11+
import ProjectLoadingSkeleton from "../components/skeletons/ProjectLoadingSkeleton";
1112

1213
export const projectStructure = {
1314
title: '',
@@ -77,7 +78,11 @@ const ProjectPage = () => {
7778
return (
7879
<AnimationWrapper>
7980
{
80-
loading ? <Loader /> :
81+
loading ? (
82+
<>
83+
<ProjectLoadingSkeleton />
84+
</>
85+
) :
8186
<ProjectContext.Provider value={{ project, setProject, islikedByUser, setLikedByUser, commentsWrapper, setCommentsWrapper, totalParentCommentsLoaded, setTotalParentCommentsLoaded }}>
8287

8388
<CommentsContainer />

0 commit comments

Comments
 (0)