Skip to content

fix loading screen text on C-chain and L1s #3343

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 19, 2025
Merged

fix loading screen text on C-chain and L1s #3343

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
b8927da
fix loading screen text on C-chain and L1s
federiconardelli7 Nov 17, 2025
2738f24
add uploading skeleton for overview page of stats
federiconardelli7 Nov 17, 2025
a7246ea
add uploading skeleton for validator page of stats
federiconardelli7 Nov 17, 2025
ac7aa7c
add uploading skeleton for C-chain and L1s pages of stats
federiconardelli7 Nov 17, 2025
9e7c466
Merge branch 'master' into federiconardelli7/fix-loading-stats-screen…
federiconardelli7 Nov 18, 2025
416147f
fix the skelethon loading screen on the C-Chain and L1 chains
federiconardelli7 Nov 18, 2025
03fcc57
fix font of unchanged text while loading
federiconardelli7 Nov 18, 2025
99e0702
Merge branch 'federiconardelli7/fix-loading-stats-screen-c-chain' of …
federiconardelli7 Nov 18, 2025
d11834b
Merge branch 'master' into federiconardelli7/fix-loading-stats-screen…
federiconardelli7 Nov 18, 2025
6d504e0
Merge branch 'master' into federiconardelli7/fix-loading-stats-screen…
federiconardelli7 Nov 19, 2025
2df25dd
Merge branch 'master' into federiconardelli7/fix-loading-stats-screen…
federiconardelli7 Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 124 additions & 11 deletions app/(home)/stats/overview/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -286,19 +286,132 @@ export default function AvalancheMetrics() {
if (loading) {
return (
<div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
<div className="container mx-auto px-6 py-10 pb-24 space-y-12">
<div className="space-y-3">
<div>
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
Avalanche L1s Index
</h1>
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
Loading comprehensive stats for Avalanche Mainnet L1s...
</p>
<main className="container mx-auto px-6 py-10 pb-24 space-y-8">
{/* Hero Section - Loading State */}
<div className="relative overflow-hidden rounded-2xl p-8 sm:p-12 mb-10">
{/* Multi-layer gradient background */}
<div className="absolute inset-0 bg-black" />
<div
className="absolute inset-0 opacity-60"
style={{
background: 'linear-gradient(140deg, #E84142 0%, transparent 70%)'
}}
/>
<div
className="absolute inset-0 opacity-40"
style={{
background: 'linear-gradient(to top left, #3752AC 0%, transparent 50%)'
}}
/>
<div
className="absolute inset-0 opacity-30"
style={{
background: 'radial-gradient(circle at 50% 50%, #E84142 0%, #3752AC 30%, transparent 70%)'
}}
/>

{/* Content */}
<div className="relative z-10 space-y-8">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<div className="flex-1">
<h1 className="text-3xl sm:text-4xl font-semibold text-white mb-3">
Avalanche L1s Index
</h1>
<p className="text-white/80 text-sm sm:text-base max-w-3xl">
Loading comprehensive stats for Avalanche Mainnet L1s...
</p>
</div>

{/* Submit button skeleton */}
<div className="flex-shrink-0 h-9 w-32 bg-white/20 rounded-md animate-pulse" />
</div>

{/* Separator */}
<div className="border-t border-white/20" />

{/* Main metrics - 3 cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{[1, 2, 3].map((i) => (
<div key={i} className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-6 text-center animate-pulse">
<div className="h-4 bg-white/20 rounded mb-3 w-2/3 mx-auto" />
<div className="h-10 bg-white/30 rounded w-1/2 mx-auto" />
</div>
))}
</div>

{/* Secondary metrics - 4 cards */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="backdrop-blur-md bg-white/10 border border-white/20 rounded-lg p-5 text-center animate-pulse">
<div className="h-3 bg-white/20 rounded mb-3 w-3/4 mx-auto" />
<div className="h-7 bg-white/30 rounded w-1/3 mx-auto" />
</div>
))}
</div>
</div>
</div>
<ChartSkeletonLoader />
</div>

{/* Separator */}
<div className="border-t border-neutral-200 dark:border-neutral-800 my-8" />

{/* Search Bar Skeleton */}
<div className="flex items-center gap-2">
<div className="h-10 bg-neutral-200 dark:bg-neutral-800 rounded-full flex-1 max-w-sm animate-pulse" />
<div className="h-9 w-28 bg-neutral-200 dark:bg-neutral-800 rounded-full animate-pulse" />
</div>

{/* Table Skeleton */}
<Card className="overflow-hidden border border-neutral-200 dark:border-neutral-800 py-0">
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead className="bg-[#fcfcfd] dark:bg-neutral-900">
<tr className="border-b border-neutral-200 dark:border-neutral-800">
{["L1 Name", "Addresses", "Transactions", "ICM", "Validators", "Throughput", "Category", "Explorer"].map((header, i) => (
<th key={i} className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-2 text-left">
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded w-20 animate-pulse" />
</th>
))}
</tr>
</thead>
<tbody className="bg-white dark:bg-neutral-950">
{[...Array(10)].map((_, rowIndex) => (
<tr key={rowIndex} className="border-b border-slate-100 dark:border-neutral-800">
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-24 animate-pulse" />
</div>
</td>
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
</td>
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
</td>
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 animate-pulse" />
</td>
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 animate-pulse" />
</td>
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
</td>
<td className="border-r border-slate-100 dark:border-neutral-800 px-4 py-2">
<div className="h-6 bg-neutral-200 dark:bg-neutral-800 rounded-full w-20 animate-pulse" />
</td>
<td className="px-4 py-2">
<div className="flex items-center justify-center">
<div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</Card>
</main>

{/* Bubble Navigation */}
<StatsBubbleNav />
Expand Down
123 changes: 112 additions & 11 deletions app/(home)/stats/validators/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -358,19 +358,120 @@ export default function ValidatorStatsPage() {
if (loading) {
return (
<div className="min-h-screen bg-white dark:bg-neutral-950 pt-8">
<div className="container mx-auto px-6 py-10 pb-24 space-y-12">
<div className="space-y-3">
<div>
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
Validator Stats
</h1>
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed">
Loading validator statistics for {network}...
</p>
<main className="container mx-auto px-6 py-10 pb-24 space-y-8">
{/* Header Section */}
<div className="mb-10">
<div className="flex items-start justify-between gap-4 mb-3">
<div>
<h1 className="text-4xl sm:text-4xl font-semibold tracking-tight text-black dark:text-white">
Validator Stats
</h1>
<p className="text-base text-neutral-600 dark:text-neutral-400 max-w-2xl leading-relaxed mt-2">
Loading validator statistics for {network}...
</p>
</div>
</div>
</div>
<ChartSkeletonLoader />
</div>

{/* Aggregated Stats Cards Skeleton */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12 gap-4">
{/* Total Chains Card */}
<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">
<div className="p-6 text-center flex flex-col justify-center flex-1 animate-pulse">
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-3 w-24 mx-auto" />
<div className="h-10 bg-neutral-300 dark:bg-neutral-700 rounded w-16 mx-auto mb-2" />
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-32 mx-auto" />
</div>
</Card>

{/* Total Validators Card */}
<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">
<div className="p-6 text-center flex flex-col justify-center flex-1 animate-pulse">
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-3 w-28 mx-auto" />
<div className="h-10 bg-neutral-300 dark:bg-neutral-700 rounded w-20 mx-auto mb-2" />
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-24 mx-auto" />
</div>
</Card>

{/* Version Breakdown Card */}
<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">
<div className="p-6 flex flex-col justify-center flex-1 animate-pulse">
<div className="h-4 bg-neutral-300 dark:bg-neutral-700 rounded mb-4 w-40" />
<div className="h-8 bg-neutral-200 dark:bg-neutral-800 rounded-full mb-4" />
<div className="flex flex-wrap gap-3 justify-center">
{[1, 2, 3, 4, 5].map((i) => (
<div key={i} className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-20" />
))}
</div>
</div>
</Card>
</div>

{/* Search & Filter Bar Skeleton */}
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-3">
<div className="relative flex-1 max-w-sm">
<div className="h-10 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
</div>
<div className="h-9 w-9 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
<div className="flex items-center gap-2">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-24 animate-pulse" />
<div className="h-10 w-40 bg-neutral-200 dark:bg-neutral-800 rounded-md animate-pulse" />
</div>
</div>

{/* Table Skeleton */}
<Card className="overflow-hidden border border-[#e1e2ea] dark:border-neutral-800 py-0">
<div className="overflow-x-auto">
<table className="w-full border-collapse">
<thead className="bg-[#fcfcfd] dark:bg-neutral-900">
<tr className="border-b border-neutral-200 dark:border-neutral-800">
{["Chain Name", "Validators", "By Nodes %", "By Stake %", "Version Breakdown", "Actions"].map((header, i) => (
<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'}`}>
<div className={`h-4 bg-neutral-300 dark:bg-neutral-700 rounded w-24 animate-pulse ${i === 0 ? '' : i === 5 ? 'mx-auto' : 'ml-auto'}`} />
</th>
))}
</tr>
</thead>
<tbody className="bg-white dark:bg-neutral-950">
{[...Array(10)].map((_, rowIndex) => (
<tr key={rowIndex} className="border-b border-neutral-200 dark:border-neutral-800">
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3">
<div className="flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-neutral-200 dark:bg-neutral-800 animate-pulse" />
<div className="flex flex-col gap-1">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-32 animate-pulse" />
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-20 animate-pulse" />
</div>
</div>
</td>
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-12 ml-auto animate-pulse" />
</td>
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 ml-auto animate-pulse" />
</td>
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3 text-right">
<div className="h-4 bg-neutral-200 dark:bg-neutral-800 rounded w-16 ml-auto animate-pulse" />
</td>
<td className="border-r border-neutral-200 dark:border-neutral-800 px-4 py-3">
<div className="space-y-2">
<div className="h-6 bg-neutral-200 dark:bg-neutral-800 rounded-full animate-pulse" />
<div className="flex gap-2">
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
<div className="h-3 bg-neutral-200 dark:bg-neutral-800 rounded w-16 animate-pulse" />
</div>
</div>
</td>
<td className="px-4 py-3 text-center">
<div className="h-8 w-16 bg-neutral-200 dark:bg-neutral-800 rounded-md mx-auto animate-pulse" />
</td>
</tr>
))}
</tbody>
</table>
</div>
</Card>
</main>
<StatsBubbleNav />
</div>
);
Expand Down
Loading