fix: show loading spinner instead of clickable claim button during data fetch

[DukeDeSouth]

Summary

Fixes #614

When switching networks (e.g., from CELO to XDC), the claimed state resets to undefined while new claim data loads from the smart contract. The existing render logic used claimed ? <ClaimBalance> : <ClaimButton>, which treated undefined as falsy — rendering an active, blue "Claim Now" button that does nothing when clicked.

Root Cause

claimed is typed as boolean | undefined. JavaScript's falsy evaluation in the ternary operator doesn't distinguish between false (data loaded, user hasn't claimed) and undefined (data still loading).

Fix

Added an explicit claimed === undefined check before the existing ternary to display a loading Spinner (using the existing variant="page-loader" pattern from the codebase) until claim data is available.

Before:

{claimed ? <ClaimBalance /> : <ClaimButton />}

After:

{claimed === undefined ? <Spinner /> : claimed ? <ClaimBalance /> : <ClaimButton />}

Changes

• src/pages/gd/Claim/OldClaim.tsx: Added Spinner to native-base import, added loading state guard (6 lines changed)

Test Plan

• Switch from CELO to XDC network — verify spinner shows instead of clickable button
• Wait for claim data to load — verify button appears correctly after loading
• Claim with amount > 0 — verify ClaimButton works
• Claim with amount = 0 — verify ClaimBalance shows
• Initial page load — verify spinner shows until data loads
• After successful claim — verify ClaimBalance shows

Made with Cursor

Summary by Sourcery

Bug Fixes:

• Prevent an inactive claim button from rendering while claim status is still loading by showing a loading spinner instead.

[sourcery-ai]

Hey - I've left some high level feedback:

• The nested ternary for claimed === undefined ? ... : claimed ? ... : ... is getting a bit hard to read; consider extracting this into a small helper/component or using early returns so each state (loading / claimed / unclaimed) is rendered via clearer conditional blocks.
• Relying on claimed === undefined as an implicit loading flag couples the data shape to UI state; if possible, consider introducing an explicit isLoadingClaim (or similar) flag from the data-fetching hook to decouple loading from the claimed tri-state.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The nested ternary for `claimed === undefined ? ... : claimed ? ... : ...` is getting a bit hard to read; consider extracting this into a small helper/component or using early returns so each state (loading / claimed / unclaimed) is rendered via clearer conditional blocks.
- Relying on `claimed === undefined` as an implicit loading flag couples the data shape to UI state; if possible, consider introducing an explicit `isLoadingClaim` (or similar) flag from the data-fetching hook to decouple loading from the `claimed` tri-state.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sirpy]

@DukeDeSouth please ask for review when you are done
also please submit images or video showing the fix
i've approved the deployment branch

[sirpy]

@DukeDeSouth also you need to ask to be assigned in #614 so we can assign it to your username

[sirpy]

please provide a video showing how it works
and i'll approve
thanks