From b8927da343d0164e0276557a6c9b59d6cf86f4d3 Mon Sep 17 00:00:00 2001 From: federiconardelli7 Date: Mon, 17 Nov 2025 16:41:55 -0500 Subject: [PATCH 1/6] fix loading screen text on C-chain and L1s --- components/stats/ChainMetricsPage.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/stats/ChainMetricsPage.tsx b/components/stats/ChainMetricsPage.tsx index a0addeafb68..306b1751942 100644 --- a/components/stats/ChainMetricsPage.tsx +++ b/components/stats/ChainMetricsPage.tsx @@ -396,7 +396,11 @@ export default function ChainMetricsPage({ ? "Avalanche C-Chain Metrics" : `${chainName} L1 Metrics`} -

{description}

+

+ {chainName.includes("C-Chain") + ? "Loading Avalanche C-chain activity and network usage..." + : `Loading ${chainName} metrics...`} +

From 2738f24da80e5e21c910a83d581a6aaba5bf2ed9 Mon Sep 17 00:00:00 2001 From: federiconardelli7 Date: Mon, 17 Nov 2025 17:28:21 -0500 Subject: [PATCH 2/6] add uploading skeleton for overview page of stats --- app/(home)/stats/overview/page.tsx | 135 ++++++++++++++++++++++++++--- 1 file changed, 124 insertions(+), 11 deletions(-) diff --git a/app/(home)/stats/overview/page.tsx b/app/(home)/stats/overview/page.tsx index 3fef2bbe1ff..fed86b78b2a 100644 --- a/app/(home)/stats/overview/page.tsx +++ b/app/(home)/stats/overview/page.tsx @@ -286,19 +286,132 @@ export default function AvalancheMetrics() { if (loading) { return (
-
-
-
-

- Avalanche L1s Index -

-

- Loading comprehensive stats for Avalanche Mainnet L1s... -

+
+ {/* Hero Section - Loading State */} +
+ {/* Multi-layer gradient background */} +
+
+
+
+ + {/* Content */} +
+
+
+

+ Avalanche L1s Index +

+

+ Loading comprehensive stats for Avalanche Mainnet L1s... +

+
+ + {/* Submit button skeleton */} +
+
+ + {/* Separator */} +
+ + {/* Main metrics - 3 cards */} +
+ {[1, 2, 3].map((i) => ( +
+
+
+
+ ))} +
+ + {/* Secondary metrics - 4 cards */} +
+ {[1, 2, 3, 4].map((i) => ( +
+
+
+
+ ))} +
- -
+ + {/* Separator */} +
+ + {/* Search Bar Skeleton */} +
+
+
+
+ + {/* Table Skeleton */} + +
+ + + + {["L1 Name", "Addresses", "Transactions", "ICM", "Validators", "Throughput", "Category", "Explorer"].map((header, i) => ( + + ))} + + + + {[...Array(10)].map((_, rowIndex) => ( + + + + + + + + + + + ))} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
{/* Bubble Navigation */} From a7246eadeaf355c7f348a0eb8b1aedf4b7116eca Mon Sep 17 00:00:00 2001 From: federiconardelli7 Date: Mon, 17 Nov 2025 17:28:46 -0500 Subject: [PATCH 3/6] add uploading skeleton for validator page of stats --- app/(home)/stats/validators/page.tsx | 123 ++++++++++++++++++++++++--- 1 file changed, 112 insertions(+), 11 deletions(-) diff --git a/app/(home)/stats/validators/page.tsx b/app/(home)/stats/validators/page.tsx index 8d768194087..4c89188ea54 100644 --- a/app/(home)/stats/validators/page.tsx +++ b/app/(home)/stats/validators/page.tsx @@ -358,19 +358,120 @@ export default function ValidatorStatsPage() { if (loading) { return (
-
-
-
-

- Validator Stats -

-

- Loading validator statistics for {network}... -

+
+ {/* Header Section */} +
+
+
+

+ Validator Stats +

+

+ Loading validator statistics for {network}... +

+
- -
+ + {/* Aggregated Stats Cards Skeleton */} +
+ {/* Total Chains Card */} + +
+
+
+
+
+ + + {/* Total Validators Card */} + +
+
+
+
+
+ + + {/* Version Breakdown Card */} + +
+
+
+
+ {[1, 2, 3, 4, 5].map((i) => ( +
+ ))} +
+
+ +
+ + {/* Search & Filter Bar Skeleton */} +
+
+
+
+
+
+
+
+
+
+ + {/* Table Skeleton */} + +
+ + + + {["Chain Name", "Validators", "By Nodes %", "By Stake %", "Version Breakdown", "Actions"].map((header, i) => ( + + ))} + + + + {[...Array(10)].map((_, rowIndex) => ( + + + + + + + + + ))} + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
); From ac7aa7cf959e9b634a2d682f68d641844d38ab14 Mon Sep 17 00:00:00 2001 From: federiconardelli7 Date: Mon, 17 Nov 2025 17:29:07 -0500 Subject: [PATCH 4/6] add uploading skeleton for C-chain and L1s pages of stats --- components/stats/ChainMetricsPage.tsx | 179 ++++++++++++++++++++++++-- 1 file changed, 166 insertions(+), 13 deletions(-) diff --git a/components/stats/ChainMetricsPage.tsx b/components/stats/ChainMetricsPage.tsx index 306b1751942..5b1330c7f57 100644 --- a/components/stats/ChainMetricsPage.tsx +++ b/components/stats/ChainMetricsPage.tsx @@ -388,23 +388,176 @@ export default function ChainMetricsPage({ if (loading) { return (
-
-
+
+ {/* Hero Section Skeleton */} +
+ {/* Multi-layer gradient background */} +
+
+
+
+ + {/* Content */} +
+
+ {/* Chain Logo Skeleton */} +
+ +
+

+ {chainName.includes("C-Chain") + ? "Avalanche C-Chain Metrics" + : `${chainName} L1 Metrics`} +

+

+ {chainName.includes("C-Chain") + ? "Loading Avalanche C-chain activity and network usage..." + : `Loading ${chainName} metrics...`} +

+
+
+
+
+ + {/* Network Overview Section */} +
+

Network Overview

+
+ {/* Daily Active Addresses */} + + +
+
+ +
+
Daily Active Addresses
+
+
+ + + + {/* Daily Transactions */} + + +
+
+ +
+
Daily Transactions
+
+
+ + + + {/* Total Contracts Deployed */} + + +
+
+ +
+
Total Contracts Deployed
+
+
+ + + + {/* Daily Interchain Messages */} + + +
+
+ +
+
Daily Interchain Messages
+
+
+ + +
+
+ + {/* Historical Trends Section */} +
-

- {chainName.includes("C-Chain") - ? "Avalanche C-Chain Metrics" - : `${chainName} L1 Metrics`} -

-

- {chainName.includes("C-Chain") - ? "Loading Avalanche C-chain activity and network usage..." - : `Loading ${chainName} metrics...`} +

Historical Trends

+

+ Track {chainName} network growth and activity over time

+ +
+ {chartConfigs.slice(0, 8).map((config) => { + const Icon = config.icon; + return ( + + + {/* Chart Header */} +
+
+ +
+

{config.title}

+

{config.description}

+
+
+ {/* Period Buttons */} +
+ {["D", "W", "M", "Q", "Y"].map((period) => ( + + ))} +
+
+ + {/* Current Value Skeleton */} +
+
+
+
+ + {/* Chart Area Skeleton */} +
+ {[...Array(12)].map((_, barIndex) => ( +
+ ))} +
+ + + ); + })} +
- -
+
); From 416147f12124e5466b489bc3314dec08365e18ac Mon Sep 17 00:00:00 2001 From: federiconardelli7 Date: Tue, 18 Nov 2025 16:32:34 -0500 Subject: [PATCH 5/6] fix the skelethon loading screen on the C-Chain and L1 chains --- components/stats/ChainMetricsPage.tsx | 81 ++++++++++++++++----------- 1 file changed, 49 insertions(+), 32 deletions(-) diff --git a/components/stats/ChainMetricsPage.tsx b/components/stats/ChainMetricsPage.tsx index 5b1330c7f57..52dc03653a1 100644 --- a/components/stats/ChainMetricsPage.tsx +++ b/components/stats/ChainMetricsPage.tsx @@ -388,7 +388,7 @@ export default function ChainMetricsPage({ if (loading) { return (
-
+
{/* Hero Section Skeleton */}
{/* Multi-layer gradient background */} @@ -414,17 +414,26 @@ export default function ChainMetricsPage({ {/* Content */}
-
- {/* Chain Logo Skeleton */} -
+ {/* ExplorerDropdown Placeholder for L1s */} + {!chainName.includes("C-Chain") && ( +
+
+
+ )} -
-

+
+ {/* Chain Logo Skeleton - Only show if chainLogoURI exists */} + {chainLogoURI && ( +
+ )} + +
+

{chainName.includes("C-Chain") ? "Avalanche C-Chain Metrics" : `${chainName} L1 Metrics`}

-

+

{chainName.includes("C-Chain") ? "Loading Avalanche C-chain activity and network usage..." : `Loading ${chainName} metrics...`} @@ -435,13 +444,15 @@ export default function ChainMetricsPage({

{/* Network Overview Section */} -
-

Network Overview

-
+
+
+

Network Overview

+
+
{/* Daily Active Addresses */} - -
+ +
@@ -453,8 +464,8 @@ export default function ChainMetricsPage({ {/* Daily Transactions */} - -
+ +
@@ -466,8 +477,8 @@ export default function ChainMetricsPage({ {/* Total Contracts Deployed */} - -
+ +
@@ -479,8 +490,8 @@ export default function ChainMetricsPage({ {/* Daily Interchain Messages */} - -
+ +
@@ -493,26 +504,26 @@ export default function ChainMetricsPage({
{/* Historical Trends Section */} -
-
-

Historical Trends

-

+

+
+

Historical Trends

+

Track {chainName} network growth and activity over time

-
+
{chartConfigs.slice(0, 8).map((config) => { const Icon = config.icon; return ( - - - {/* Chart Header */} -
-
+ + {/* Chart Header */} +
+
+
-

{config.title}

+

{config.title}

{config.description}

@@ -531,15 +542,18 @@ export default function ChainMetricsPage({ ))}
+
+ {/* Chart Content */} + {/* Current Value Skeleton */} -
+
{/* Chart Area Skeleton */} -
+
{[...Array(12)].map((_, barIndex) => (
))}
+ + {/* Brush Slider Skeleton */} +
); })}
-

+
); From 03fcc57034444bf8dfbd6f84e87da04d81a63ab1 Mon Sep 17 00:00:00 2001 From: federiconardelli7 Date: Tue, 18 Nov 2025 16:39:36 -0500 Subject: [PATCH 6/6] fix font of unchanged text while loading --- components/stats/ChainMetricsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/stats/ChainMetricsPage.tsx b/components/stats/ChainMetricsPage.tsx index 52dc03653a1..0539a23ca0a 100644 --- a/components/stats/ChainMetricsPage.tsx +++ b/components/stats/ChainMetricsPage.tsx @@ -428,7 +428,7 @@ export default function ChainMetricsPage({ )}
-

+

{chainName.includes("C-Chain") ? "Avalanche C-Chain Metrics" : `${chainName} L1 Metrics`}