feat: skeleton

[C0mberry]

Description

• adding common skeleton components
• adding skeleton to homepage
• adding skeleton to transaction page

Type of change

• Bug fix

Screenshots

Testing

1. open homepage and see loading state
2. open transaction page and see loading state

see storybook

Related Issues

HOO-265
HOO-347
HOO-348

Checklist

• I have added tests that prove my fix/feature works
• All tests pass locally and in CI
• I have run build:info script to update build information
• CI/CD checks pass
• I have included screenshots for protocol screens (if applicable)

[vercel]

@C0mberry is attempting to deploy a commit to the Solana Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Summary

This PR introduces a skeleton loading system for the Solana Explorer, replacing generic LoadingCard spinners on the homepage and transaction page with purpose-built, layout-accurate skeleton components. A new base Skeleton primitive (app/components/shared/ui/skeleton.tsx) powers a library of composable skeleton building blocks (Skeletons.tsx, HomepageSkeletons.tsx, TransactionSkeletons.tsx), and the homepage is refactored to gate the full page content behind supply-load state so the skeleton covers the entire viewport during data fetching.

Key changes:

• New Skeleton base component with pulse animation and motion-reduce support.
• Seven reusable skeleton variants in app/components/common/Skeletons.tsx (table rows, rich lists, stats tables, image sliders, etc.).
• app/page.tsx refactored: StakingComponent split into PageContent (supply-state machine) + StakingDisplay; StatsCardBody and LiveTransactionStatsCard each show their own skeleton instead of StatsNotReady while loading.
• app/tx/[signature]/page-client.tsx: LoadingCard replaced with TransactionPageSkeleton / TransactionDetailsSkeleton / TableCardSkeleton at all three loading call sites.
• Storybook stories with inline play assertions for all skeleton variants.
• Two issues found: (1) a relative ./components import path in app/page.tsx is inconsistent with the @components alias used everywhere else; (2) the supply-error branch in PageContent now returns only an ErrorCard, hiding DeveloperResources and UpcomingFeatures which were previously rendered unconditionally — this may be a behavioural regression if those sections contain content independent of supply data.

Confidence Score: 3/5

• Safe to merge after confirming that hiding DeveloperResources/UpcomingFeatures on supply error is intentional.
• The skeleton infrastructure itself is well-structured and the loading-state logic in both pages is correct. The score is reduced due to the supply-error branch behavioural change that hides previously-always-visible page sections, and a minor import alias inconsistency in app/page.tsx.
• app/page.tsx — supply-error branch and import path inconsistency both need attention.

Important Files Changed

Filename	Overview
app/components/shared/ui/skeleton.tsx	New base Skeleton component wrapping a div with pulse animation, reduced-motion support, and cn for className merging. Simple and correct.
app/components/common/Skeletons.tsx	New file exporting reusable skeleton components (TableRowSkeleton, RichRowSkeleton, SimpleCardSkeleton, RichListSkeleton, StatsTableSkeleton, TableCardSkeleton, ImageSliderSkeleton). Array index used as key in static lists — acceptable since these lists never reorder at runtime.
app/components/HomepageSkeletons.tsx	New file containing LiveTransactionStatsBodySkeleton and LiveTransactionStatsCardSkeleton, structurally matching the real TpsBarChart card layout (2 table rows + chart container with series buttons). Looks accurate.
app/components/LiveTransactionStatsCard.tsx	Splits the single not-ready guard into a dedicated error branch and a skeleton branch. Error path still shows StatsNotReady; loading path now shows LiveTransactionStatsBodySkeleton instead of a generic spinner. Logic is correct.
app/components/transaction/TransactionSkeletons.tsx	New file providing TransactionDetailsSkeleton and TransactionPageSkeleton. TransactionPageSkeleton renders StatsTableSkeleton rows={12} for the overview card followed by the full details skeleton.
app/components/common/stories/Skeletons.stories.tsx	Storybook stories with inline play-test assertions checking for .e-animate-pulse. Stories cover all exported skeleton variants. No issues found.
app/page.tsx	Major refactor splitting StakingComponent into PageContent + StakingDisplay. Skeleton shown during supply load. Two issues: relative ./components import path instead of @components alias, and DeveloperResources/UpcomingFeatures now hidden entirely when supply errors.
app/tx/[signature]/page-client.tsx	Replaces LoadingCard with purpose-built skeleton components at three call sites. Mixed import alias style (@components/common/Skeletons vs @/app/components/...) was flagged in a previous thread. Core skeleton logic is correct.
bench/BUILD.md	Updated bundle-size benchmark table. Homepage route grew ~0.5 kB as expected from new skeleton components. All other changes are minor noise.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Page] --> B[StatsProvider + SupplyProvider]
    B --> C[PageContent]

    C -->|Disconnected| D[null]
    C -->|Idle / Connecting| E[PageSkeleton]
    C -->|Error string| F[ErrorCard with retry]
    C -->|Supply loaded| G[Full Page Content]

    E --> E1[SimpleCardSkeleton x2]
    E --> E2[StatsTableSkeleton]
    E --> E3[LiveTransactionStatsCardSkeleton]
    E --> E4[ImageSliderSkeleton]
    E --> E5[TableCardSkeleton]

    G --> H[StakingDisplay]
    G --> I[StatsCardBody]
    G --> J[LiveTransactionStatsCard]
    G --> K[DeveloperResources]
    G --> L[UpcomingFeatures]

    I -->|Loading| I1[StatsTableSkeleton]
    I -->|Error| I2[StatsNotReady]
    J -->|Loading| J1[LiveTransactionStatsBodySkeleton]
    J -->|Error| J2[StatsNotReady]

    subgraph TxPage [Transaction Page]
        TX1[StatusCard]
        TX2[DetailsSection in Suspense]
        TX1 -->|Loading| TX3[TransactionPageSkeleton]
        TX3 --> TX4[StatsTableSkeleton rows=12]
        TX3 --> TX5[TransactionDetailsSkeleton]
        TX2 -->|Fetching| TX6[TransactionDetailsSkeleton]
        TX2 -->|Suspense fallback| TX7[TransactionDetailsSkeleton]
    end

Loading

_{Last reviewed commit: "resolve bot comments"}

[C0mberry]

@greptile-apps issue was addressed

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Mar 20, 2026 2:15pm

[Woody4618]

Please dont wait for all to be loaded before showing content