feat: forward message loading feedback - show loader in header, disab…

[deepak0x]

Proposed Changes

This PR improves the user experience while forwarding a message by clearly showing the in-progress state and preventing interaction during the request.

• Loader in header: While forwarding, the header right shows the app’s ActivityIndicator instead of the Send button so users know the action is in progress.
• Disabled channel selector: The Person or channel field is disabled while sending so users can’t change recipients mid-request.
• Form lock: The form content (ScrollView) uses pointerEvents='none' while sending, making the entire screen non-interactive until the request completes or fails.

---

Issue(s)

Closes #6903

---

How to Test / Reproduce

1. Open a room and long-press a message.
2. Tap Forward.
3. In Person or channel, select one or more channels/recipients.
4. Tap Send.

Expected behavior:

• The header shows a spinner (loader) instead of Send.
• The Person or channel field is disabled and not tappable.
• The rest of the form does not respond to taps until the request completes or errors.
• On API error, the loader disappears and Send + channel selector become usable again.

---

Screenshots/Video

WhatsApp.Video.2026-02-03.at.08.38.20.mp4

---

Type of Change

• Bugfix (non-breaking change which fixes an issue)
• Improvement (non-breaking change which improves a current function)
• New feature (non-breaking change which adds functionality)
• Documentation update (if none of the other choices apply)

---

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA
• Lint and unit tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works (if applicable)
• I have added necessary documentation (if applicable)
• Any dependent changes have been merged and published in downstream modules

Summary by CodeRabbit

• New Features
  • Selection control can be programmatically disabled to prevent interaction.
• Bug Fixes
  • Disabled interactive elements while forwarding to avoid duplicate submissions.
  • Added a loading indicator in the header and disabled scrolling/inputs during send operations.
• Chores
  • Improved send-flow handling to reliably reset UI state after success or error.

[coderabbitai]

Walkthrough

Adds a disabled prop to SelectPersonOrChannel and its interface; ForwardMessageView passes disabled while sending, shows an ActivityIndicator in the header, and disables selection and scroll interactions during the send operation.

Changes

Cohort / File(s)	Summary
Select component & interface app/views/ForwardMessageView/SelectPersonOrChannel.tsx, app/views/ForwardMessageView/interfaces.ts	Added optional disabled?: boolean to IForwardMessageViewSelectRoom and accepted/forwarded disabled prop to the internal MultiSelect.
ForwardMessageView usage & UI state app/views/ForwardMessageView/index.tsx	Passes disabled to SelectPersonOrChannel when sending, shows ActivityIndicator in header while sending, and disables scroll interactions via pointerEvents during the send process.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ForwardView as ForwardMessageView
  participant Select as SelectPersonOrChannel
  participant Multi as MultiSelect
  participant API as MessageAPI

  User->>ForwardView: Tap Send
  ForwardView->>ForwardView: set sending = true
  ForwardView->>Select: set disabled = true
  Select->>Multi: disabled = true (UI non-interactive)
  ForwardView->>ForwardView: show ActivityIndicator
  ForwardView->>API: sendForwardRequest(...)
  API-->>ForwardView: success / error
  ForwardView->>ForwardView: set sending = false (finally)
  ForwardView->>Select: set disabled = false
  ForwardView-->>User: update UI (success or alert)

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Suggested reviewers

• OtavioStasiak

Poem

🐰 I hopped in, nose a-tingle bright,
Paused the world while messages take flight,
A spinner hums, the clicks all cease,
Then back to hopping—order and peace! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly summarizes the main changes: adding loading feedback and disabling the message selector while forwarding.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #6903: shows ActivityIndicator loader in header while sending, disables SelectPersonOrChannel, disables form interactions via pointerEvents, and resets state on errors.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to implementing loading feedback for message forwarding; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

app/views/ForwardMessageView/index.tsx (2)

65-76: ⚠️ Potential issue | 🟠 Major

Ensure sending resets even if permalink lookup fails.

If getPermalinkMessage throws, the exception is uncaught and setSending(false) never executes, leaving the UI permanently disabled. Move the permalink and message setup into the try block and add a finally to guarantee state resets.

🛠️ Suggested fix

 const handlePostMessage = async () => {
 	setSending(true);
-	const permalink = await getPermalinkMessage(message);
-	const msg = `[ ](${permalink})\n`;
-	try {
+	try {
+		const permalink = await getPermalinkMessage(message);
+		const msg = `[ ](${permalink})\n`;
 		await Promise.all(rooms.map(roomId => postMessage(roomId, msg)));
 		EventEmitter.emit(LISTENER, { message: I18n.t('Message_has_been_shared') });
 		navigation.dispatch(StackActions.pop());
 	} catch (e: any) {
 		Alert.alert(I18n.t('Oops'), e.message);
+	} finally {
+		setSending(false);
 	}
-	setSending(false);
 };

---

40-63: ⚠️ Potential issue | 🟠 Major

Include rooms and colors in the dependency array.
Using rooms.length instead of rooms fails to update the header when room selections change but maintain the same count (e.g., swapping from [roomA, roomB] to [roomB, roomC]). Additionally, colors is referenced in the header callback but not included as a dependency, so theme changes won't trigger updates. Include both rooms and colors to ensure the header action reflects the latest selection and theme.

🔧 Minimal fix

-	}, [rooms.length, navigation, sending]);
+	}, [rooms, navigation, sending, colors]);