Skip to content

Commit be38096

Browse files
CopilotAdez017
Copilot
and
Adez017
committed
Fix: Add skeleton loader styles to LeaderBoard component, revert giveaway changes
Co-authored-by: Adez017 <[email protected]>
1 parent 72dc5db commit be38096

File tree

2 files changed

+156
-215
lines changed

2 files changed

+156
-215
lines changed

‎src/components/dashboard/LeaderBoard/leaderboard.css‎

Lines changed: 154 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -884,6 +884,160 @@
884884
}
885885
}
886886

887+
/* Skeleton Loader Styles */
888+
.skeleton-loader {
889+
padding: 24px;
890+
border-radius: 12px;
891+
margin-top: 24px;
892+
}
893+
894+
.skeleton-loader.light {
895+
background: #fff;
896+
border: 1px solid #e2e8f0;
897+
}
898+
899+
.skeleton-loader.dark {
900+
background: #2b303b;
901+
border: 1px solid #444;
902+
}
903+
904+
.skeleton-header {
905+
display: grid;
906+
grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr;
907+
gap: 16px;
908+
padding: 16px 24px;
909+
font-weight: 600;
910+
font-size: 14px;
911+
border-bottom: 2px solid;
912+
margin-bottom: 16px;
913+
}
914+
915+
.skeleton-loader.light .skeleton-header {
916+
color: #666;
917+
border-color: #e2e8f0;
918+
}
919+
920+
.skeleton-loader.dark .skeleton-header {
921+
color: #b3b3b3;
922+
border-color: #444;
923+
}
924+
925+
.skeleton-row {
926+
display: grid;
927+
grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr;
928+
align-items: center;
929+
gap: 16px;
930+
padding: 16px 24px;
931+
margin-bottom: 12px;
932+
border-radius: 8px;
933+
}
934+
935+
.skeleton-loader.light .skeleton-row {
936+
background: #f8fafc;
937+
}
938+
939+
.skeleton-loader.dark .skeleton-row {
940+
background: #323742;
941+
}
942+
943+
.skeleton-avatar {
944+
width: 32px;
945+
height: 32px;
946+
border-radius: 50%;
947+
background: linear-gradient(
948+
90deg,
949+
rgba(0, 0, 0, 0.06) 25%,
950+
rgba(0, 0, 0, 0.12) 50%,
951+
rgba(0, 0, 0, 0.06) 75%
952+
);
953+
background-size: 200% 100%;
954+
animation: skeleton-shimmer 2s infinite;
955+
}
956+
957+
.skeleton-loader.dark .skeleton-avatar {
958+
background: linear-gradient(
959+
90deg,
960+
rgba(255, 255, 255, 0.05) 25%,
961+
rgba(255, 255, 255, 0.1) 50%,
962+
rgba(255, 255, 255, 0.05) 75%
963+
);
964+
background-size: 200% 100%;
965+
}
966+
967+
.skeleton-avatar.large {
968+
width: 40px;
969+
height: 40px;
970+
}
971+
972+
.skeleton-info {
973+
display: flex;
974+
flex-direction: column;
975+
gap: 8px;
976+
width: 100%;
977+
}
978+
979+
.skeleton-bar {
980+
height: 16px;
981+
width: 60%;
982+
border-radius: 4px;
983+
background: linear-gradient(
984+
90deg,
985+
rgba(0, 0, 0, 0.06) 25%,
986+
rgba(0, 0, 0, 0.12) 50%,
987+
rgba(0, 0, 0, 0.06) 75%
988+
);
989+
background-size: 200% 100%;
990+
animation: skeleton-shimmer 2s infinite;
991+
}
992+
993+
.skeleton-loader.dark .skeleton-bar {
994+
background: linear-gradient(
995+
90deg,
996+
rgba(255, 255, 255, 0.05) 25%,
997+
rgba(255, 255, 255, 0.1) 50%,
998+
rgba(255, 255, 255, 0.05) 75%
999+
);
1000+
background-size: 200% 100%;
1001+
}
1002+
1003+
.skeleton-badges {
1004+
display: flex;
1005+
gap: 8px;
1006+
}
1007+
1008+
.skeleton-badge {
1009+
height: 20px;
1010+
width: 60px;
1011+
border-radius: 12px;
1012+
background: linear-gradient(
1013+
90deg,
1014+
rgba(0, 0, 0, 0.06) 25%,
1015+
rgba(0, 0, 0, 0.12) 50%,
1016+
rgba(0, 0, 0, 0.06) 75%
1017+
);
1018+
background-size: 200% 100%;
1019+
animation: skeleton-shimmer 2s infinite;
1020+
}
1021+
1022+
.skeleton-loader.dark .skeleton-badge {
1023+
background: linear-gradient(
1024+
90deg,
1025+
rgba(255, 255, 255, 0.05) 25%,
1026+
rgba(255, 255, 255, 0.1) 50%,
1027+
rgba(255, 255, 255, 0.05) 75%
1028+
);
1029+
background-size: 200% 100%;
1030+
}
1031+
1032+
@keyframes skeleton-shimmer {
1033+
0% {
1034+
background-position: -200% 0;
1035+
}
1036+
100% {
1037+
background-position: 200% 0;
1038+
}
1039+
}
1040+
8871041
/* PR List Modal Styles */
8881042
.pr-modal-backdrop {
8891043
position: fixed;

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

Lines changed: 2 additions & 215 deletions
Original file line numberDiff line numberDiff line change
@@ -145,200 +145,6 @@ 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-
342148
.giveaway-leaderboard-grid {
343149
display: grid;
344150
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -964,27 +770,8 @@ const GiveawayPage: React.FC = () => {
964770

965771
{loading ? (
966772
<div className="giveaway-loading">
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>
773+
<div className="loading-spinner">Loading...</div>
774+
<p>Fetching leaderboard data...</p>
988775
</div>
989776
) : (
990777
<div className="giveaway-leaderboard-grid">

0 commit comments

Comments
 (0)