Skip to content

Commit cc2cbbe

Browse files
max-programmingmax-programming
committed
Added loading file
1 parent 16bb7eb commit cc2cbbe

File tree

2 files changed

+131
-0
lines changed

2 files changed

+131
-0
lines changed

‎src/app/(public)/repos/[language]/loading.tsx

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
export default function Loading() {
2+
return (
3+
<>
4+
{/* Header Skeleton */}
5+
<div className="border-b border-hacktoberfest-dark-green">
6+
<div className="container mx-auto px-4 py-4">
7+
<div className="flex items-center justify-between">
8+
<div className="h-8 w-32 bg-hacktoberfest-dark-green rounded-md animate-pulse"></div>
9+
<div className="flex space-x-4">
10+
<div className="h-8 w-20 bg-hacktoberfest-dark-green rounded-md animate-pulse"></div>
11+
<div className="h-8 w-24 bg-hacktoberfest-dark-green rounded-md animate-pulse"></div>
12+
</div>
13+
</div>
14+
</div>
15+
</div>
16+
17+
<div className="container mx-auto">
18+
<div className="min-h-screen pt-5">
19+
{/* Title Section Skeleton */}
20+
<div className="text-center">
21+
<div className="w-5/6 max-w-md mx-auto">
22+
<div className="mb-5 space-y-3">
23+
<div className="h-12 w-full bg-shimmer animate-shimmer rounded-lg"></div>
24+
<div className="h-8 w-3/4 mx-auto bg-shimmer animate-shimmer rounded-lg"></div>
25+
</div>
26+
</div>
27+
</div>
28+
29+
{/* Sorter Skeleton */}
30+
<div className="flex justify-center mb-6">
31+
<div className="flex space-x-4">
32+
<div className="h-10 w-24 bg-hacktoberfest-black rounded-md animate-pulse"></div>
33+
<div className="h-10 w-28 bg-hacktoberfest-black rounded-md animate-pulse"></div>
34+
<div className="h-10 w-20 bg-hacktoberfest-black rounded-md animate-pulse"></div>
35+
</div>
36+
</div>
37+
38+
{/* Stars Filter Skeleton */}
39+
<div className="flex justify-center mb-8">
40+
<div className="flex space-x-3">
41+
<div className="h-10 w-32 bg-hacktoberfest-black rounded-md animate-pulse"></div>
42+
<div className="h-10 w-16 bg-hacktoberfest-black rounded-md animate-pulse"></div>
43+
<div className="h-10 w-32 bg-hacktoberfest-black rounded-md animate-pulse"></div>
44+
</div>
45+
</div>
46+
47+
{/* Repository Cards Grid Skeleton */}
48+
<div className="grid grid-cols-1 gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
49+
{Array.from({ length: 21 }).map((_, index) => (
50+
<div
51+
key={index}
52+
className="bg-hacktoberfest-black border border-hacktoberfest-dark-green rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-200"
53+
>
54+
{/* Repository Title */}
55+
<div className="mb-4">
56+
<div className="h-6 w-3/4 bg-shimmer animate-shimmer rounded mb-2"></div>
57+
<div className="h-4 w-full bg-hacktoberfest-dark-green rounded animate-pulse"></div>
58+
<div className="h-4 w-2/3 bg-hacktoberfest-dark-green rounded animate-pulse mt-1"></div>
59+
</div>
60+
61+
{/* Language and Stats */}
62+
<div className="flex items-center justify-between mb-4">
63+
<div className="flex items-center space-x-2">
64+
<div className="h-3 w-3 bg-hacktoberfest-green rounded-full animate-pulse"></div>
65+
<div className="h-4 w-16 bg-hacktoberfest-dark-green rounded animate-pulse"></div>
66+
</div>
67+
<div className="flex space-x-4">
68+
<div className="flex items-center space-x-1">
69+
<div className="h-4 w-4 bg-hacktoberfest-dark-green rounded animate-pulse"></div>
70+
<div className="h-4 w-8 bg-hacktoberfest-dark-green rounded animate-pulse"></div>
71+
</div>
72+
<div className="flex items-center space-x-1">
73+
<div className="h-4 w-4 bg-hacktoberfest-dark-green rounded animate-pulse"></div>
74+
<div className="h-4 w-8 bg-hacktoberfest-dark-green rounded animate-pulse"></div>
75+
</div>
76+
</div>
77+
</div>
78+
79+
{/* Topics */}
80+
<div className="flex flex-wrap gap-2 mb-4">
81+
<div className="h-6 w-20 bg-hacktoberfest-deep-pink rounded-full animate-pulse"></div>
82+
<div className="h-6 w-16 bg-hacktoberfest-green rounded-full animate-pulse"></div>
83+
<div className="h-6 w-24 bg-hacktoberfest-pink rounded-full animate-pulse"></div>
84+
</div>
85+
86+
{/* Action Button */}
87+
<div className="h-10 w-full bg-shimmer animate-shimmer rounded-md"></div>
88+
</div>
89+
))}
90+
</div>
91+
</div>
92+
93+
{/* Pagination Skeleton */}
94+
<div className="flex justify-center items-center space-x-2 py-8">
95+
<div className="h-10 w-20 bg-hacktoberfest-black rounded-md animate-pulse"></div>
96+
<div className="flex space-x-1">
97+
{Array.from({ length: 5 }).map((_, index) => (
98+
<div
99+
key={index}
100+
className="h-10 w-10 bg-hacktoberfest-black rounded-md animate-pulse"
101+
></div>
102+
))}
103+
</div>
104+
<div className="h-10 w-20 bg-hacktoberfest-black rounded-md animate-pulse"></div>
105+
</div>
106+
</div>
107+
</>
108+
);
109+
}

‎src/styles/globals.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,3 +62,25 @@ a {
6262
@apply w-full left-0;
6363
}
6464
}
65+
66+
@layer utilities {
67+
/* Shimmer animation for skeleton loaders */
68+
@keyframes shimmer {
69+
0% {
70+
background-position: -200% 0;
71+
}
72+
100% {
73+
background-position: 200% 0;
74+
}
75+
}
76+
77+
.animate-shimmer {
78+
animation: shimmer 1.5s infinite;
79+
background-size: 200% 100%;
80+
}
81+
82+
.bg-shimmer {
83+
background: linear-gradient(90deg, #183717 25%, #50da4c 50%, #183717 75%);
84+
background-size: 200% 100%;
85+
}
86+
}

0 commit comments

Comments
 (0)