Skip to content

Commit 3ba696a

Browse files
martineckardtmartineckardt
authored
Merge pull request #3343 from ava-labs/federiconardelli7/fix-loading-stats-screen-c-chain
fix loading screen text on C-chain and L1s
2 parents b5107d4 + 2df25dd commit 3ba696a

File tree

3 files changed

+420
-32
lines changed

3 files changed

+420
-32
lines changed

‎app/(home)/stats/overview/page.tsx‎

Lines changed: 124 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -286,19 +286,132 @@ export default function AvalancheMetrics() {
286286
if (loading) {
287287
return (
288288
<div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
289-
<div className="container mx-auto px-6 py-10 pb-24 space-y-12">
290-
<div className="space-y-3">
291-
<div>
292-
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
293-
Avalanche L1s Index
294-
</h1>
295-
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
296-
Loading comprehensive stats for Avalanche Mainnet L1s...
297-
</p>
289+
<main className="container mx-auto px-6 py-10 pb-24 space-y-8">
290+
{/* Hero Section - Loading State */}
291+
<div className="relative overflow-hidden rounded-2xl p-8 sm:p-12 mb-10">
292+
{/* Multi-layer gradient background */}
293+
<div className="absolute inset-0 bg-black" />
294+
<div
295+
className="absolute inset-0 opacity-60"
296+
style={{
297+
background: 'linear-gradient(140deg, #E84142 0%, transparent 70%)'
298+
}}
299+
/>
300+
<div
301+
className="absolute inset-0 opacity-40"
302+
style={{
303+
background: 'linear-gradient(to top left, #3752AC 0%, transparent 50%)'
304+
}}
305+
/>
306+
<div
307+
className="absolute inset-0 opacity-30"
308+
style={{
309+
background: 'radial-gradient(circle at 50% 50%, #E84142 0%, #3752AC 30%, transparent 70%)'
310+
}}
311+
/>
312+
313+
{/* Content */}
314+
<div className="relative z-10 space-y-8">
315+
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
316+
<div className="flex-1">
317+
<h1 className="text-3xl sm:text-4xl font-semibold text-white mb-3">
318+
Avalanche L1s Index
319+
</h1>
320+
<p className="text-white/80 text-sm sm:text-base max-w-3xl">
321+
Loading comprehensive stats for Avalanche Mainnet L1s...
322+
</p>
323+
</div>
324+
325+
{/* Submit button skeleton */}
326+
<div className="flex-shrink-0 h-9 w-32 bg-white/20 rounded-md animate-pulse" />
327+
</div>
328+
329+
{/* Separator */}
330+
<div className="border-t border-white/20" />
331+
332+
{/* Main metrics - 3 cards */}
333+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
334+
{[1, 2, 3].map((i) => (
335+
<div key={i} className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 text-center animate-pulse">
336+
<div className="h-4 bg-white/20 rounded mb-3 w-2/3 mx-auto" />
337+
<div className="h-10 bg-white/30 rounded w-1/2 mx-auto" />
338+
</div>
339+
))}
340+
</div>
341+
342+
{/* Secondary metrics - 4 cards */}
343+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
344+
{[1, 2, 3, 4].map((i) => (
345+
<div key={i} className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center animate-pulse">
346+
<div className="h-3 bg-white/20 rounded mb-3 w-3/4 mx-auto" />
347+
<div className="h-7 bg-white/30 rounded w-1/3 mx-auto" />
348+
</div>
349+
))}
350+
</div>
298351
</div>
299352
</div>
300-
<ChartSkeletonLoader />
301-
</div>
353+
354+
{/* Separator */}
355+
<div className="border-t border-neutral-200 dark:border-neutral-800 my-8" />
356+
357+
{/* Search Bar Skeleton */}
358+
<div className="flex items-center gap-2">
359+
<div className="h-10 bg-neutral-200 dark:bg-neutral-800 rounded-full flex-1 max-w-sm animate-pulse" />
360+
<div className="h-9 w-28 bg-neutral-200 dark:bg-neutral-800 rounded-full animate-pulse" />
361+
</div>
362+
363+
{/* Table Skeleton */}
364+
<Card className="overflow-hidden border border-neutral-200 dark:border-neutral-800 py-0">
365+
<div className="overflow-x-auto">
366+
<table className="w-full border-collapse">
367+
<thead className="bg-[#fcfcfd] dark:bg-neutral-900">
368+
<tr className="border-b border-neutral-200 dark:border-neutral-800">
369+
{["L1 Name", "Addresses", "Transactions", "ICM", "Validators", "Throughput", "Category", "Explorer"].map((header, i) => (
370+
<th key={i} className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-2 text-left">
371+
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded w-20 animate-pulse" />
372+
</th>
373+
))}
374+
</tr>
375+
</thead>
376+
<tbody className="bg-white dark:bg-neutral-950">
377+
{[...Array(10)].map((_, rowIndex) => (
378+
<tr key={rowIndex} className="border-b border-slate-100 dark:border-neutral-800">
379+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
380+
<div className="flex items-center gap-3">
381+
<div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
382+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-24 animate-pulse" />
383+
</div>
384+
</td>
385+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
386+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
387+
</td>
388+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
389+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
390+
</td>
391+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
392+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 animate-pulse" />
393+
</td>
394+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
395+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 animate-pulse" />
396+
</td>
397+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
398+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
399+
</td>
400+
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
401+
<div className="h-6 bg-neutral-200 dark:bg-neutral-800 rounded-full w-20 animate-pulse" />
402+
</td>
403+
<td className="px-4 py-2">
404+
<div className="flex items-center justify-center">
405+
<div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
406+
</div>
407+
</td>
408+
</tr>
409+
))}
410+
</tbody>
411+
</table>
412+
</div>
413+
</Card>
414+
</main>
302415

303416
{/* Bubble Navigation */}
304417
<StatsBubbleNav />

‎app/(home)/stats/validators/page.tsx‎

Lines changed: 112 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -358,19 +358,120 @@ export default function ValidatorStatsPage() {
358358
if (loading) {
359359
return (
360360
<div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
361-
<div className="container mx-auto px-6 py-10 pb-24 space-y-12">
362-
<div className="space-y-3">
363-
<div>
364-
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
365-
Validator Stats
366-
</h1>
367-
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
368-
Loading validator statistics for {network}...
369-
</p>
361+
<main className="container mx-auto px-6 py-10 pb-24 space-y-8">
362+
{/* Header Section */}
363+
<div className="mb-10">
364+
<div className="flex items-start justify-between gap-4 mb-3">
365+
<div>
366+
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
367+
Validator Stats
368+
</h1>
369+
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed mt-2">
370+
Loading validator statistics for {network}...
371+
</p>
372+
</div>
370373
</div>
371374
</div>
372-
<ChartSkeletonLoader />
373-
</div>
375+
376+
{/* Aggregated Stats Cards Skeleton */}
377+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4">
378+
{/* Total Chains Card */}
379+
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 py-0 h-full flex flex-col lg:col-span-3">
380+
<div className="p-6 text-center flex flex-col justify-center flex-1 animate-pulse">
381+
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-3 w-24 mx-auto" />
382+
<div className="h-10 bg-neutral-300 dark:bg-neutral-700 rounded w-16 mx-auto mb-2" />
383+
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-32 mx-auto" />
384+
</div>
385+
</Card>
386+
387+
{/* Total Validators Card */}
388+
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 py-0 h-full flex flex-col lg:col-span-3">
389+
<div className="p-6 text-center flex flex-col justify-center flex-1 animate-pulse">
390+
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-3 w-28 mx-auto" />
391+
<div className="h-10 bg-neutral-300 dark:bg-neutral-700 rounded w-20 mx-auto mb-2" />
392+
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-24 mx-auto" />
393+
</div>
394+
</Card>
395+
396+
{/* Version Breakdown Card */}
397+
<Card className="border border-[#e1e2ea] dark:border-neutral-800 bg-[#fcfcfd] dark:bg-neutral-900 py-0 h-full flex flex-col lg:col-span-6">
398+
<div className="p-6 flex flex-col justify-center flex-1 animate-pulse">
399+
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-4 w-40" />
400+
<div className="h-8 bg-neutral-200 dark:bg-neutral-800 rounded-full mb-4" />
401+
<div className="flex flex-wrap gap-3 justify-center">
402+
{[1, 2, 3, 4, 5].map((i) => (
403+
<div key={i} className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-20" />
404+
))}
405+
</div>
406+
</div>
407+
</Card>
408+
</div>
409+
410+
{/* Search & Filter Bar Skeleton */}
411+
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
412+
<div className="relative flex-1 max-w-sm">
413+
<div className="h-10 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
414+
</div>
415+
<div className="h-9 w-9 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
416+
<div className="flex items-center gap-2">
417+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-24 animate-pulse" />
418+
<div className="h-10 w-40 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
419+
</div>
420+
</div>
421+
422+
{/* Table Skeleton */}
423+
<Card className="overflow-hidden border border-[#e1e2ea] dark:border-neutral-800 py-0">
424+
<div className="overflow-x-auto">
425+
<table className="w-full border-collapse">
426+
<thead className="bg-[#fcfcfd] dark:bg-neutral-900">
427+
<tr className="border-b border-neutral-200 dark:border-neutral-800">
428+
{["Chain Name", "Validators", "By Nodes %", "By Stake %", "Version Breakdown", "Actions"].map((header, i) => (
429+
<th key={i} className={`border-r border-neutral-200 dark:border-neutral-800 px-4 py-2 ${i === 0 ? 'text-left' : i === 5 ? 'text-center' : 'text-right'}`}>
430+
<div className={`h-4 bg-neutral-300 dark:bg-neutral-700 rounded w-24 animate-pulse ${i === 0 ? '' : i === 5 ? 'mx-auto' : 'ml-auto'}`} />
431+
</th>
432+
))}
433+
</tr>
434+
</thead>
435+
<tbody className="bg-white dark:bg-neutral-950">
436+
{[...Array(10)].map((_, rowIndex) => (
437+
<tr key={rowIndex} className="border-b border-neutral-200 dark:border-neutral-800">
438+
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3">
439+
<div className="flex items-center gap-3">
440+
<div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
441+
<div className="flex flex-col gap-1">
442+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-32 animate-pulse" />
443+
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-20 animate-pulse" />
444+
</div>
445+
</div>
446+
</td>
447+
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
448+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 ml-auto animate-pulse" />
449+
</td>
450+
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
451+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 ml-auto animate-pulse" />
452+
</td>
453+
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
454+
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 ml-auto animate-pulse" />
455+
</td>
456+
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3">
457+
<div className="space-y-2">
458+
<div className="h-6 bg-neutral-200 dark:bg-neutral-800 rounded-full animate-pulse" />
459+
<div className="flex gap-2">
460+
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
461+
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
462+
</div>
463+
</div>
464+
</td>
465+
<td className="px-4 py-3 text-center">
466+
<div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-md mx-auto animate-pulse" />
467+
</td>
468+
</tr>
469+
))}
470+
</tbody>
471+
</table>
472+
</div>
473+
</Card>
474+
</main>
374475
<StatsBubbleNav />
375476
</div>
376477
);

0 commit comments

Comments
 (0)