fix: disable claim button while loading claim data after network switch

[DrGalio]

Problem

When switching networks, the claim button appears clickable (blue, showing "CLAIM NOW") even though claim data hasn't loaded yet. Pressing it does nothing because the underlying blockchain calls haven't completed.

Root cause: In OldClaim.tsx, when the chain ID changes, claimed is set to undefined while claim data loads:

useEffect(() => {
    setClaimed(undefined)
    setRefreshRate('everyBlock')
}, [chainId])

The ClaimButton component from @gooddollar/good-design uses disabled={claimed}. When claimed === undefined, this evaluates to disabled={undefined} (falsy), leaving the button enabled during loading.

Solution

Show a loading spinner while claimed === undefined (data loading state), and render the ClaimButton only when claim data has loaded (claimed is true or false).

Changes

• Added Spinner import from native-base
• Wrapped ClaimButton with conditional rendering: show spinner when loading, button when ready

Testing

1. Connect wallet on one network (e.g., Celo)
2. Switch to another network (e.g., XDC)
3. Observe: spinner appears instead of clickable button
4. Once claim data loads, button appears with correct amount

Fixes #614

Summary by Sourcery

Bug Fixes:

• Prevent the claim button from appearing clickable while claim data is still loading by showing a spinner until the claimed state is resolved.

[sourcery-ai]

Hey - I've left some high level feedback:

• Using claimed === undefined as the loading condition couples UI state to a sentinel value; consider introducing an explicit isClaimLoading flag (set in the useEffect that resets claimed) to make the loading state clearer and less fragile to future changes in how claimed is managed.
• Instead of completely swapping the ClaimButton for a centered spinner (which changes layout and removes the primary action from the tree), you might keep the button rendered and leverage any built-in loading/disabled mechanisms on ClaimButton while overlaying or embedding a spinner to minimize layout shift and keep the click target location stable.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Using `claimed === undefined` as the loading condition couples UI state to a sentinel value; consider introducing an explicit `isClaimLoading` flag (set in the `useEffect` that resets `claimed`) to make the loading state clearer and less fragile to future changes in how `claimed` is managed.
- Instead of completely swapping the `ClaimButton` for a centered spinner (which changes layout and removes the primary action from the tree), you might keep the button rendered and leverage any built-in `loading`/`disabled` mechanisms on `ClaimButton` while overlaying or embedding a spinner to minimize layout shift and keep the click target location stable.

---

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.}

[L03TJ3]

Hey, since it's your first time contributing, make sure you are aware of our contribution-guidelines.

Its also the practice when working on our repo's that you ask to get assigned a ticket, not randomely push fixes.

Thanks in advance! (for now you are assigned)
@DrGalio

[L03TJ3]

@DrGalio Hey, I hope you read the contribution guidelines.
Can you provide a demo-video of it working?