feat(ui): add loading state to request approve/decline buttons

[bobziroll]

fix(ui): add loading state to request approve/decline buttons

When approving/declining a request, the server-side operation can take several seconds due to Radarr/Sonarr processing. During this time, the UI gave no feedback, leaving buttons fully interactive and the app appearing unresponsive. Add an isUpdating loading state to RequestItem and RequestCard that disables buttons and swaps icons for a spinner while the request is being processed, matching existing patterns used elsewhere in the codebase (e.g. RequestBlock, TvDetails).

Description

When you approve or decline a request, there's a noticeable delay (sometimes 10+ seconds) while the server talks to Radarr/Sonarr (at least on my NAS setup). During that whole time, nothing happens in the UI — the buttons just sit there looking clickable, and the app feels like it's frozen.

This adds a simple loading state so the buttons are disabled and show a spinner while the request is being processed.

Changes are in two files:

• RequestItem (the /requests page)
• RequestCard (the recent requests slider on Discover and user profiles)

How Has This Been Tested?

Ran the app locally with pnpm dev, created requests from a non-admin user, then approved/declined them as an admin. Verified the spinner shows up, buttons are disabled during the request, and everything goes back to normal once it completes. Tested both the /requests page and the recent requests section on the Discover page.

Screenshots / Logs (if applicable)

Checklist:

• I have read and followed the contribution guidelines.
• Disclosed any use of AI (see our policy)
• I have updated the documentation accordingly. (N/A)
• All new and existing tests passed.
• Successful build pnpm build
• Translation keys pnpm i18n:extract
• Database migration (if required) (N/A)

AI Disclosure: This PR was written with significant help from Cursor (Claude). I directed the changes and reviewed everything manually (including some manual changes), but the code was largely AI-generated.

Summary by CodeRabbit

• Bug Fixes
  • Approve/decline actions now show a spinner and disable related controls (including edit) while processing, reliably reset their state when finished, and surface a clear error toast if the action fails.
• Localization
  • Added English message for request modification failures to improve error clarity for users.

[coderabbitai]

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: c141dc9e-f60d-4570-bbfe-7ccd72638dae

📥 Commits

Reviewing files that changed from the base of the PR and between 2d1007c and fa4694d.

📒 Files selected for processing (3)

• src/components/RequestCard/index.tsx
• src/components/RequestList/RequestItem/index.tsx
• src/i18n/locale/en.json

✅ Files skipped from review due to trivial changes (1)

• src/i18n/locale/en.json

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/RequestCard/index.tsx

---

📝 Walkthrough

Walkthrough

Replaced a boolean loading flag with updatingType: 'approve' | 'decline' | null in two request components; approve/decline flows set updatingType before the axios POST, show a spinner on the active action, disable related buttons (including edit/modal buttons) while in-flight, show a localized toast on failure, and perform cache revalidation/mutation only on success; updatingType is cleared in finally.

Changes

Cohort / File(s)	Summary
RequestCard component src/components/RequestCard/index.tsx	Added Spinner import and `updatingType: 'approve'
RequestItem (RequestList) src/components/RequestList/RequestItem/index.tsx	Introduced updatingType state and Spinner import. modifyRequest now sets updatingType before the POST, uses try/catch/finally, shows components.RequestList.RequestItem.failedmodify on failure, triggers SWR revalidation/mutation only in the success path, and clears updatingType in finally. Approve/decline and edit (PencilIcon) buttons disabled during updates and show spinner for the active action.
Localization src/i18n/locale/en.json	Added two i18n keys: components.RequestCard.failedmodify and components.RequestList.RequestItem.failedmodify with the message "Something went wrong while modifying the request.".

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I tapped my paw, the buttons froze,

A gentle spinner hums and glows.
Approve or decline — one at a time,
No hurried clicks, no clumsy rhyme.
— a rabbit, pleased with tidy state ❤️

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main feature added: loading state indicators (spinners) on approve/decline buttons in the request UI components.

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

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/RequestCard/index.tsx`:
- Around line 264-278: The modifyRequest function currently has no error
handling; wrap the axios.post call with a catch that calls addToast with an
appropriate failure message (use the same messaging pattern as retryRequest and
a key from globalMessages, e.g., globalMessages.requestModifyFailed or add a new
key), ensure revalidate/mutate are only called on success, and keep the existing
finally block that calls setIsUpdating(false); reference modifyRequest,
retryRequest, addToast, globalMessages, revalidate, mutate and axios.post when
making the change.

In `@src/components/RequestList/RequestItem/index.tsx`:
- Around line 328-342: modifyRequest currently sets isUpdating and makes the
POST but provides no error feedback; update modifyRequest to catch errors and
call addToast with an error message (similar to retryRequest), ensure
setIsUpdating(false) remains in finally, and only revalidate/mutate on success;
reference the modifyRequest function, the addToast helper, retryRequest for the
pattern, and retain calls to revalidate() and mutate('/api/v1/request/count')
when the POST succeeds.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: d72513ca-d287-41ae-96b5-3eac9b5264ba

📥 Commits

Reviewing files that changed from the base of the PR and between 6f9b743 and 9e65353.

📒 Files selected for processing (2)

• src/components/RequestCard/index.tsx
• src/components/RequestList/RequestItem/index.tsx

[fallenbagel]

Also one small UX suggestion. Since isUpdating is a single boolean, both the approve and decline buttons show a spinner simultaneously when either is clicked. It'd feel more polished if only the clicked button showed the spinner while the other is just disabled.

You could just track which action is in flight instead with something like:

const [updatingType, setUpdatingType] = useState<'approve' | 'decline' | null>(null);

[Copilot]

Pull request overview

Adds UI feedback while approving/declining requests by introducing an isUpdating loading state that disables relevant actions and shows a spinner during the server-side operation.

Changes:

• Add isUpdating state + spinner icon swap for approve/decline actions in RequestItem and RequestCard
• Disable approve/decline (and edit) buttons while the request modification call is in flight
• Add new i18n strings for a “failed to modify request” toast message

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
src/i18n/locale/en.json	Adds new English translation keys for “failed modify” toast messages.
src/components/RequestList/RequestItem/index.tsx	Introduces isUpdating to disable approve/decline/edit and show spinner while modifying a request on the Requests page.
src/components/RequestCard/index.tsx	Mirrors the same loading/disabled behavior for approve/decline/edit actions in the RequestCard UI.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.