Skip to content

perf: lazy-load and size-reserve TrustSection partner logos (Closes #1268) - #1374

Open
waterWang wants to merge 1 commit into
Fluxora-Org:mainfrom
waterWang:perf/trust-section-lazy-logos
Open

perf: lazy-load and size-reserve TrustSection partner logos (Closes #1268)#1374
waterWang wants to merge 1 commit into
Fluxora-Org:mainfrom
waterWang:perf/trust-section-lazy-logos

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Adds a partner logo strip to the TrustSection showing Stellar ecosystem partners (Stellar, USDC, Soroban), with lazy loading and explicit dimensions to prevent layout shift.

Changes

  • public/logo-stellar.svg — New partner logo asset
  • public/logo-usdc.svg — New partner logo asset
  • public/logo-soroban.svg — New partner logo asset
  • src/components/landing-page/TrustSection.tsx — Added partner logo strip with:
    • loading="lazy" — defers image fetch until near viewport
    • decoding="async" — off-main-thread decoding
    • Explicit width/height — reserves layout space (prevents CLS)
    • opacity-80 with hover:opacity-100 — visual consistency
    • Wrapped in <ul>/<li> for screen-reader-friendly navigation
  • docs/PERFORMANCE_NOTES.md — Documented the change
  • src/components/landing-page/tests/HeroTrustSection.a11y.test.tsx — Added test verifying lazy loading attributes and alt text

Testing

  • npm test — all 10 tests pass (3 files)
  • New test: renders lazily-loaded partner logos with explicit dimensions and alt text

Closes #1268

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add lazy-loading and explicit width/height to partner logos in src/components/landing-page/TrustSection.tsx to prevent layout shift

1 participant