fix: Keep connecting label on header while logging in

[Rohit3523]

Proposed changes

The app is currently displaying on header:

• connecting while websocket connection is being established.
• updating while fetching rooms

There is, however, a gap between the two states when the app is logging in and we don’t show anything.
With the code below, we’ll keep showing connecting while logging in.
It’s a better UX, while not introducing another concept to the users, like logging in

Issue(s)

https://rocketchat.atlassian.net/browse/CORE-1713

How to test or reproduce

Screenshots

Types of changes

• 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

Further comments

Summary by CodeRabbit

• Bug Fixes
  • Improved login state feedback by displaying a "Connecting" message during both connection establishment and login processes, providing clearer status updates to users.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The Header component in RoomsListView now includes a login fetching state check alongside the existing connection state check. This ensures the "Connecting" subtitle persists during the login phase, eliminating an empty state between connection establishment and room data fetching.

Changes

Cohort / File(s)	Summary
Header UI State Logic app/views/RoomsListView/components/Header.tsx	Added state.login.isFetching to the Connecting subtitle condition to keep "Connecting" label visible during login process

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested reviewers

• diegolmello

Poem

🐰 A rabbit hops through the login flow,
No empty states to steal the show!
"Connecting" persists with steady grace,
Better UX, a smoother place! ✨

🚥 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 title accurately describes the main change: keeping the 'connecting' label visible during login, which is the primary objective of the PR.
Linked Issues check	✅ Passed	The PR implementation directly addresses CORE-1713 by adding the isLoggingIn selector to the Connecting subtitle condition, ensuring the 'connecting' label displays during login.
Out of Scope Changes check	✅ Passed	All changes are directly related to the PR objective; only the Header component is modified to add the login state condition.
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
• Commit unit tests in branch header-status-change

---

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between ede2569 and a296910.

📒 Files selected for processing (1)

• app/views/RoomsListView/components/Header.tsx

🧰 Additional context used

🧬 Code graph analysis (1)

app/views/RoomsListView/components/Header.tsx (1)

app/lib/hooks/useAppSelector.ts (1)

• useAppSelector (6-6)

🔇 Additional comments (2)

app/views/RoomsListView/components/Header.tsx (2)

39-39: LGTM!

The new selector follows the established pattern of other selectors in this component and the naming is clear and consistent.

---

56-67: LGTM!

The updated condition correctly addresses the gap between connection states. The priority order of the subtitle conditions is logical:

1. supportedVersionsStatus === 'expired' takes precedence (critical state)
2. connecting || isLoggingIn shows during active connection/login
3. isFetching shows during room updates
4. !connected handles network disconnection
5. Server URL as the default connected state

This ensures a seamless user experience during startup without introducing a new "logging in" label.

_{✏️ Tip: You can disable this entire section by setting review_details to false in your review 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.}