feat(statcard): redesign StatCard for explicit loading/error/zero/loa… - #67
Merged
Merged
Conversation
…ded states
- Add status prop ('loading' | 'error' | 'loaded', default 'loaded') so the
three states are always visually and semantically distinct from each other
and from a genuine zero value — eliminating the zero-flash trust problem.
- Loading state: animate-pulse skeleton shimmer, zero numbers ever shown.
- Error state: em-dash + 'Error loading data' sub-label in rose, AlertCircle
icon, aria-label on wrapper for screen readers.
- Zero state (numeric 0): deliberate '0 USDC'/'0' with a configurable
zeroLabel sub-text (e.g. 'No earnings yet') so a real zero is never
ambiguous with a skeleton or an error.
- Loaded state: formatted value with responsive font-size scaling (text-2xl
→ text-xl → text-lg → text-base by string length) + title tooltip that
always exposes the full unabbreviated exact figure. No '1.2M'-style
abbreviation for financial figures.
- Add format prop ('currency' | 'count' | 'percent' | 'raw') so call sites
pass numeric values and StatCard formats internally, enabling font scaling
and large-number detection.
Update all three dashboard call sites:
- sponsor/page.tsx: add fetchStatus state (init 'loading'), remove page-level
loading guard so page chrome is always visible, catch sets status='error'
and data=null instead of falling back silently to zeros.
- contributor/page.tsx: same fetchStatus pattern; fix critical bug where catch
block set lifetimeEarnings/mergedPRs/completionRate to 0 — a network error
was visually identical to a brand-new account. Now sets stats=null +
status='error'. Harden active-claims value guard to stats !== null.
- maintainer/page.tsx: wrap fetchBounties in try/catch; pass statStatus='error'
to all four StatCards if fetch throws.
Add dev-only kitchen sink in sponsor dashboard showing all four states
side by side for continuous visual regression during development.
Add Jest + React Testing Library infrastructure (was entirely absent):
- jest.config.ts, jest.setup.ts, npm scripts 'test' and 'test:watch'
- StatCard.test.tsx: 11 RTL tests covering loading, error (x2), zero (x2),
zero-as-string pass-through, typical loaded (x2), large-number font class +
title tooltip, pre-formatted string pass-through. All 11 pass.
Lint: 0 errors. Build: clean (13/13 pages).
|
@legend4tech is attempting to deploy a commit to the chonilius' projects Team on Vercel. A member of the Team first needs to authorize it. |
…cases # Conflicts: # package.json
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Hardening StatCard Financial Reporting
closes #53
Summary
Refactored the
StatCardcomponent to handle financial figures robustly, resolving ambiguities around data loading, errors, zero-balances, and large-number overflows. Added explicit state management and updated all three dashboard call sites to prevent trust-eroding UI states (such as briefly flashing$0 budget remainingduring initial data fetches).Changes
1.
StatCardInterface & Explicit States (src/components/ui/StatCard.tsx)statusprop ("loading" | "error" | "loaded") to break the dependency on inferring state from a bare number.0during network fetches.—with an "Error loading data" sub-label and anaria-labelfor screen reader accessibility on fetch failures.0value, complete with an explicit sub-label (customizable viazeroLabel, defaulting to "No activity yet") rather than conflating zero with null/error.2. Domain-Appropriate Large-Number Policy
$1.2M) to preserve exact precision for sponsors and contributors.valueFontClassto dynamically scale font size (text-2xldown totext-base) based on character count, preventing layout overflow without truncating.titleattribute so the exact value is always accessible via hover or keyboard focus.3. Dashboard Integration
SponsorDashboardPage,ContributorDashboardPage, andMaintainerDashboardPageto explicitly pass their respective data-fetching states to the newstatusprop."error"instead of defaulting data models to0, ensuring that network failures aren't interpreted as sudden financial zeros.sponsor/page.tsxthat renders all fourStatCardstates side-by-side to prevent future styling regressions.4. Comprehensive Testing (
src/components/ui/StatCard.test.tsx)loadingstate (hiding actual values).errorstate accessibility and UI.zerostate while ensuring string-zeros (e.g.,"0%") safely bypass zero-treatment.Acceptance Criteria Met
0or blank stat card during pending Suspense boundaries or active data loading.