Skip to content

fix(ui): remove double loading animation on app startup - #386

Merged
Kukks merged 1 commit into
masterfrom
wt-fix-loading-double-flash-20260309
Mar 10, 2026
Merged

Kukks merged 1 commit into
masterfrom
wt-fix-loading-double-flash-20260309

Conversation

@sahilc0

@sahilc0 sahilc0 commented Mar 9, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Fixes the loading SVG appearing twice on startup (slides left, new one enters from right)
  • Root cause: two independent mechanisms both showing the Loading page — an inline render guard (line 172) and a navigate(Pages.Loading) call in a useEffect (line 112). The navigate call redundantly set direction: 'forward', triggering AnimatePresence to re-animate the already-visible Loading page.
  • Replaced navigate(Pages.Loading) with a plain early return. The inline guard already renders Loading; the useEffect only needs to prevent premature navigation before wallet data loads.

Changes

  • src/App.tsx — one line: if (!walletLoaded) return navigate(Pages.Loading) → if (!walletLoaded) return

Test plan

  • Clear site data, reload on desktop — loading SVG should appear once, no slide animation
  • Same test on mobile via HTTPS tunnel
  • Returning user (has wallet, locked) — loading → unlock transition should work normally
  • New user (no wallet) — loading → onboard transition should work normally

Summary by CodeRabbit

  • Bug Fixes
    • Improved wallet initialization flow during app startup to prevent unnecessary redirect interruptions.

The loading screen was playing a forward slide transition on startup
(SVG slides left, new one enters from right) because two independent
mechanisms were both trying to show the Loading page:

1. Inline render guard (line 172) — shows Loading when init conditions
   aren't met
2. useEffect navigate (line 112) — called navigate(Pages.Loading),
   which redundantly set direction to 'forward' and triggered
   AnimatePresence to re-animate the already-visible Loading page

Removed the navigate(Pages.Loading) call and replaced with a plain
early return. The inline guard already handles rendering Loading;
the useEffect guard only needs to prevent premature navigation to
Onboard/Unlock before wallet data is loaded.
@sahilc0
sahilc0 requested review from bordalix and pietro909 March 9, 2026 19:34
@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying wallet-bitcoin with  Cloudflare Pages  Cloudflare Pages

Latest commit: 8bc6740
Status: ✅  Deploy successful!
Preview URL: https://93302809.wallet-bitcoin.pages.dev
Branch Preview URL: https://wt-fix-loading-double-flash.wallet-bitcoin.pages.dev

View logs

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying wallet-mutinynet with  Cloudflare Pages  Cloudflare Pages

Latest commit: 8bc6740
Status: ✅  Deploy successful!
Preview URL: https://da081bdb.arkade-wallet.pages.dev
Branch Preview URL: https://wt-fix-loading-double-flash.arkade-wallet.pages.dev

View logs

@coderabbitai

coderabbitai Bot commented Mar 9, 2026 •

Copy link
Copy Markdown
Contributor

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b9b4c253-52d3-48d9-a23a-30fabe0c2243

📥 Commits

Reviewing files that changed from the base of the PR and between ee6162d and 8bc6740.

📒 Files selected for processing (1)
  • src/App.tsx

Walkthrough

Modified wallet-loading redirect logic in src/App.tsx: when walletLoaded is false, the effect now returns without navigation instead of redirecting to Pages.Loading, allowing subsequent checks for wallet.pubkey and initialized state to proceed.

Changes

Cohort / File(s) Summary
Wallet Loading Redirect Logic
src/App.tsx
Changed the conditional logic to return early without redirecting when wallet is not loaded, enabling downstream validation checks to execute in sequence rather than immediately routing to loading page.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • pietro909
  • bordalix
🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'fix(ui): remove double loading animation on app startup' directly matches the main change: eliminating the double loading animation by removing the redundant navigation call in the useEffect, while keeping the inline rendering guard.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch wt-fix-loading-double-flash-20260309

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@tiero

tiero commented Mar 9, 2026

Copy link
Copy Markdown
Member

tACK

@tiero

tiero commented Mar 10, 2026

Copy link
Copy Markdown
Member

This seems a nobrainer cc/ @Kukks

@Kukks
Kukks merged commit b8c75e8 into master Mar 10, 2026
5 checks passed
@Kukks
Kukks deleted the wt-fix-loading-double-flash-20260309 branch March 10, 2026 19:01
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.

4 participants