Fix: Improve login loading button

[Zishan-7]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
peanut-wallet	Ready	Preview	Comment	Nov 6, 2025 7:12pm

[coderabbitai]

Walkthrough

The change updates the login control in the Invites page by replacing a plain disabled anchor with a Bruddle Button component featuring a loading state tied to isLoggingIn, primary-soft variant, and shadow styling. The UI layout gap is also adjusted for the md breakpoint.

Changes

Cohort / File(s)	Summary
Login Control Refactor src/components/Invites/InvitesPage.tsx	Replaced plain disabled anchor with Bruddle Button component including loading state (loading={isLoggingIn}), variant="primary-soft", and shadowSize="4". Adjusted md breakpoint gap from gap-10 to gap-6 in flex column container.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single file affected with UI-focused changes
• Button component replacement is straightforward with loading state integration
• No logic changes to claim-invite flow or exported entity signatures

Possibly related PRs

• [TASK-15701] Fix: guest invite link flow #1311 — Both PRs modify InvitesPage.tsx's login control with a Bruddle Button component using the new useLogin hook and isLoggingIn state.
• [TASK-14565] add loading spinner on logout button #1224 — Both PRs touch Button loading behavior by implementing/applying the loading prop on button components.

Suggested labels

enhancement

Suggested reviewers

• kushagrasarathe

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	The description includes only an embedded image without textual content describing the changes, making it impossible to verify relevance to the changeset.	Add a text-based description explaining the purpose of the changes, such as what was improved in the login button or why the loading state was added.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix: Improve login loading button' directly matches the main changeset focus, which is replacing a plain button with a Bruddle Button component that includes loading state functionality.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/improve-login-loading-animation

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b1e99e9 and 92aa498.

📒 Files selected for processing (1)

• src/components/Invites/InvitesPage.tsx (2 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1089
File: src/components/LandingPage/noFees.tsx:282-285
Timestamp: 2025-08-14T12:46:10.706Z
Learning: In the peanutprotocol/peanut-ui project, loading states are implemented only after they have been properly designed by the design team to ensure consistency across the application.

📚 Learning: 2025-10-08T17:13:13.155Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1299
File: src/app/(mobile-ui)/points/page.tsx:41-51
Timestamp: 2025-10-08T17:13:13.155Z
Learning: In `src/app/(mobile-ui)/points/page.tsx`, the icon name "invite-heart" is intentionally used (not "inviter-heart") when displaying who invited the current user, as this is a deliberate design choice despite semantic differences with UserHeader usage.

Applied to files:

• src/components/Invites/InvitesPage.tsx

📚 Learning: 2025-09-29T18:34:33.596Z

Learnt from: Zishan-7
Repo: peanutprotocol/peanut-ui PR: 1251
File: src/components/Invites/JoinWaitlistPage.tsx:41-55
Timestamp: 2025-09-29T18:34:33.596Z
Learning: In the JoinWaitlistPage component, after successfully accepting an invite via invitesApi.acceptInvite(), calling fetchUser() is sufficient to update the user state and automatically display the app. No manual navigation to /home or other pages is required since the user is already on the home page and the app will be displayed once user.hasAppAccess is updated.

Applied to files:

• src/components/Invites/InvitesPage.tsx

🧬 Code graph analysis (1)

src/components/Invites/InvitesPage.tsx (1)

src/components/0_Bruddle/Button.tsx (1)

• Button (78-269)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Deploy-Preview

🔇 Additional comments (2)

src/components/Invites/InvitesPage.tsx (2)

93-93: Verify if the gap spacing change is intentional.

The gap value appears to have been modified to gap-4 md:gap-6. This change seems unrelated to the PR's stated objective of improving the login loading button. Please confirm whether this spacing adjustment was intentional or if it was modified accidentally.

---

104-112: Verify that the loading state design has been approved.

The Button implementation correctly handles the loading state with proper disabled behavior and visual feedback. However, according to project learnings, loading states should only be implemented after proper design approval to ensure consistency across the application. Please confirm that the design team has approved this loading state implementation.

Based on learnings

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[notion-workspace]

Improve login loading animation