Skip to content

Commit 72dc5db

Browse files
CopilotAdez017
Copilot
and
Adez017
committed
Add animated skeleton loader to giveaway leaderboard page with theme support
Co-authored-by: Adez017 <[email protected]>
1 parent bee0bd9 commit 72dc5db

File tree

1 file changed

+215
-2
lines changed

1 file changed

+215
-2
lines changed

‎src/pages/dashboard/giveaway/index.tsx‎

Lines changed: 215 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,200 @@ const giveawayStyles = `
145145
color: var(--ifm-color-emphasis-700);
146146
}
147147
148+
.giveaway-loading-container {
149+
display: grid;
150+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
151+
gap: 1.5rem;
152+
max-width: 1200px;
153+
margin: 0 auto;
154+
padding: 2rem 0;
155+
}
156+
157+
.giveaway-skeleton-card {
158+
background: var(--ifm-background-color);
159+
border: 1px solid var(--ifm-color-emphasis-300);
160+
border-radius: 16px;
161+
padding: 1.5rem;
162+
position: relative;
163+
overflow: hidden;
164+
box-shadow: 0 4px 12px var(--ifm-color-emphasis-200);
165+
}
166+
167+
[data-theme='dark'] .giveaway-skeleton-card {
168+
background: var(--ifm-color-emphasis-100);
169+
border-color: var(--ifm-color-emphasis-400);
170+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
171+
}
172+
173+
.giveaway-skeleton-badge {
174+
position: absolute;
175+
top: 1rem;
176+
right: 1rem;
177+
width: 40px;
178+
height: 40px;
179+
border-radius: 50%;
180+
background: var(--ifm-color-emphasis-300);
181+
}
182+
183+
[data-theme='dark'] .giveaway-skeleton-badge {
184+
background: var(--ifm-color-emphasis-600);
185+
}
186+
187+
.giveaway-skeleton-avatar {
188+
width: 80px;
189+
height: 80px;
190+
border-radius: 50%;
191+
margin: 0 auto 1rem;
192+
background: linear-gradient(
193+
90deg,
194+
var(--ifm-color-emphasis-200) 25%,
195+
var(--ifm-color-emphasis-300) 50%,
196+
var(--ifm-color-emphasis-200) 75%
197+
);
198+
background-size: 200% 100%;
199+
animation: shimmer 2s infinite;
200+
}
201+
202+
[data-theme='dark'] .giveaway-skeleton-avatar {
203+
background: linear-gradient(
204+
90deg,
205+
var(--ifm-color-emphasis-400) 25%,
206+
var(--ifm-color-emphasis-500) 50%,
207+
var(--ifm-color-emphasis-400) 75%
208+
);
209+
background-size: 200% 100%;
210+
}
211+
212+
.giveaway-skeleton-name {
213+
height: 24px;
214+
width: 70%;
215+
margin: 0 auto 1rem;
216+
border-radius: 4px;
217+
background: linear-gradient(
218+
90deg,
219+
var(--ifm-color-emphasis-200) 25%,
220+
var(--ifm-color-emphasis-300) 50%,
221+
var(--ifm-color-emphasis-200) 75%
222+
);
223+
background-size: 200% 100%;
224+
animation: shimmer 2s infinite;
225+
}
226+
227+
[data-theme='dark'] .giveaway-skeleton-name {
228+
background: linear-gradient(
229+
90deg,
230+
var(--ifm-color-emphasis-400) 25%,
231+
var(--ifm-color-emphasis-500) 50%,
232+
var(--ifm-color-emphasis-400) 75%
233+
);
234+
background-size: 200% 100%;
235+
}
236+
237+
.giveaway-skeleton-stats {
238+
display: flex;
239+
justify-content: space-around;
240+
margin-bottom: 1.5rem;
241+
}
242+
243+
.giveaway-skeleton-stat {
244+
text-align: center;
245+
}
246+
247+
.giveaway-skeleton-stat-value {
248+
height: 32px;
249+
width: 60px;
250+
margin: 0 auto 0.5rem;
251+
border-radius: 4px;
252+
background: linear-gradient(
253+
90deg,
254+
var(--ifm-color-emphasis-200) 25%,
255+
var(--ifm-color-emphasis-300) 50%,
256+
var(--ifm-color-emphasis-200) 75%
257+
);
258+
background-size: 200% 100%;
259+
animation: shimmer 2s infinite;
260+
}
261+
262+
[data-theme='dark'] .giveaway-skeleton-stat-value {
263+
background: linear-gradient(
264+
90deg,
265+
var(--ifm-color-emphasis-400) 25%,
266+
var(--ifm-color-emphasis-500) 50%,
267+
var(--ifm-color-emphasis-400) 75%
268+
);
269+
background-size: 200% 100%;
270+
}
271+
272+
.giveaway-skeleton-stat-label {
273+
height: 16px;
274+
width: 50px;
275+
margin: 0 auto;
276+
border-radius: 4px;
277+
background: linear-gradient(
278+
90deg,
279+
var(--ifm-color-emphasis-200) 25%,
280+
var(--ifm-color-emphasis-300) 50%,
281+
var(--ifm-color-emphasis-200) 75%
282+
);
283+
background-size: 200% 100%;
284+
animation: shimmer 2s infinite;
285+
}
286+
287+
[data-theme='dark'] .giveaway-skeleton-stat-label {
288+
background: linear-gradient(
289+
90deg,
290+
var(--ifm-color-emphasis-400) 25%,
291+
var(--ifm-color-emphasis-500) 50%,
292+
var(--ifm-color-emphasis-400) 75%
293+
);
294+
background-size: 200% 100%;
295+
}
296+
297+
.giveaway-skeleton-button {
298+
height: 45px;
299+
width: 100%;
300+
border-radius: 8px;
301+
background: linear-gradient(
302+
90deg,
303+
var(--ifm-color-emphasis-200) 25%,
304+
var(--ifm-color-emphasis-300) 50%,
305+
var(--ifm-color-emphasis-200) 75%
306+
);
307+
background-size: 200% 100%;
308+
animation: shimmer 2s infinite;
309+
}
310+
311+
[data-theme='dark'] .giveaway-skeleton-button {
312+
background: linear-gradient(
313+
90deg,
314+
var(--ifm-color-emphasis-400) 25%,
315+
var(--ifm-color-emphasis-500) 50%,
316+
var(--ifm-color-emphasis-400) 75%
317+
);
318+
background-size: 200% 100%;
319+
}
320+
321+
@keyframes shimmer {
322+
0% {
323+
background-position: -200% 0;
324+
}
325+
100% {
326+
background-position: 200% 0;
327+
}
328+
}
329+
330+
.giveaway-loading-text {
331+
text-align: center;
332+
padding: 2rem 0;
333+
color: var(--ifm-color-emphasis-700);
334+
font-size: 1.1rem;
335+
font-weight: 500;
336+
}
337+
338+
[data-theme='dark'] .giveaway-loading-text {
339+
color: var(--ifm-color-emphasis-600);
340+
}
341+
148342
.giveaway-leaderboard-grid {
149343
display: grid;
150344
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -770,8 +964,27 @@ const GiveawayPage: React.FC = () => {
770964

771965
{loading ? (
772966
<div className="giveaway-loading">
773-
<div className="loading-spinner">Loading...</div>
774-
<p>Fetching leaderboard data...</p>
967+
<p className="giveaway-loading-text">Loading leaderboard...</p>
968+
<div className="giveaway-loading-container">
969+
{[...Array(6)].map((_, index) => (
970+
<div key={index} className="giveaway-skeleton-card">
971+
<div className="giveaway-skeleton-badge" />
972+
<div className="giveaway-skeleton-avatar" />
973+
<div className="giveaway-skeleton-name" />
974+
<div className="giveaway-skeleton-stats">
975+
<div className="giveaway-skeleton-stat">
976+
<div className="giveaway-skeleton-stat-value" />
977+
<div className="giveaway-skeleton-stat-label" />
978+
</div>
979+
<div className="giveaway-skeleton-stat">
980+
<div className="giveaway-skeleton-stat-value" />
981+
<div className="giveaway-skeleton-stat-label" />
982+
</div>
983+
</div>
984+
<div className="giveaway-skeleton-button" />
985+
</div>
986+
))}
987+
</div>
775988
</div>
776989
) : (
777990
<div className="giveaway-leaderboard-grid">

0 commit comments

Comments
 (0)