Skip to content

fix: surface useLandingStats loading/error state on the landing page (Closes #878) - #950

Open
waterWang wants to merge 1 commit into
Grainlify:mainfrom
waterWang:fix/landingpage-stats-error-loading-state-878
Open

fix: surface useLandingStats loading/error state on the landing page (Closes #878)#950
waterWang wants to merge 1 commit into
Grainlify:mainfrom
waterWang:fix/landingpage-stats-error-loading-state-878

Conversation

@waterWang

Copy link
Copy Markdown
Contributor

Summary

Surface the useLandingStats hooks isLoading and error states in the WhyChooseUs section of the landing page, replacing the silent placeholder with proper loading indicators and error handling.

Changes

useLandingStats.ts

  • Added a refetch function (via useCallback) so callers can re-trigger the fetch on demand

LandingPage.tsx

  • WhyChooseUs now destructures { display, isLoading, error, refetch } from useLandingStats()
  • While loading: stat values show SkeletonLoader placeholders
  • On error: stat values show a small "Retry" button that calls refetch
  • Added Grants Distributed stat row (was previously missing from the display)
  • Imported SkeletonLoader, RefreshCw, DollarSign as needed

LandingPage.test.tsx

  • Made the useLandingStats mock dynamic so tests can override loading/error states
  • 4 new tests covering: loading skeleton, error retry button, retry click handler, formatted values

Hero.test.tsx

  • Added refetch: vi.fn() to both mock return values to satisfy the updated type

Verification

  • ✅ 16 tests pass (12 existing + 4 new)
  • ✅ TypeScript typecheck passes (only pre-existing AdminPage.tsx error)
  • ✅ No change to the successful-load rendering path

…loses Grainlify#878)

- WhyChooseUs now destructures isLoading, error, and refetch from
  useLandingStats() alongside display
- Shows SkeletonLoader placeholders for stat values while loading
- Shows inline Retry button on fetch failure that calls refetch
- Added refetch function to useLandingStats hook for retry support
- Updated Hero.test.tsx mock to include the new refetch field
- 16 new + updated tests covering loading, success, error, and retry states
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.

1 participant