Fix app reload and white flash caused by navbar navigation

[puneeth-92]

This PR fixes the white flash and full app reload that occur when navigating using the Navbar.

Previously, clicking the app logo or the profile/avatar icon triggered a full page reload, which caused the app to briefly show a white screen, render the Home / empty gallery state, and re-run startup logic such as the update check.

The root cause was internal navigation using full page links instead of router-based navigation.

What was changed

• Replaced internal Navbar links with router-based navigation
• Ensured navigation to Home (logo click) and Settings/Profile happens without reloading the app

Result

• No white flash during navigation
• No unnecessary app reloads
• Smoother and more consistent user experience

Fixes #1020

Summary by CodeRabbit

• Refactor
  • Updated navigation component to enhance routing efficiency and responsiveness.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Converts anchor elements to React Router Link components in the Navbar component to enable client-side routing. Replaces navigation anchors for the logo and settings pages, maintaining existing styling and routing destinations while eliminating full-page reloads.

Changes

Cohort / File(s)	Summary
Navigation Component Refactoring frontend/src/components/Navigation/Navbar/Navbar.tsx	Replaces <a> elements with React Router Link components for logo (to "/") and settings navigation (to "/settings"), enabling client-side routing

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A flash of white gave quite a fright,
When dark mode met the nav so bright,
But now with links that route with care,
The page stays smooth, no flashing glare!
Hop along, dear code, you've done it right! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 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 (4 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: replacing navbar anchor elements with router-based Link components to prevent full page reloads and white flash.
Linked Issues check	✅ Passed	The code changes directly address issue #1020 by replacing anchor tags with router Link components to prevent full page reloads and white flash during navbar navigation.
Out of Scope Changes check	✅ Passed	All changes are within scope: only the navbar anchor elements are replaced with router Link components to fix the navigation issue; no unrelated modifications.

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

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a3af96c and a664f38.

📒 Files selected for processing (1)

• frontend/src/components/Navigation/Navbar/Navbar.tsx

⏰ 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: sync-labels

🔇 Additional comments (3)

frontend/src/components/Navigation/Navbar/Navbar.tsx (3)

9-9: LGTM - Import is correct for react-router v7.

The import from 'react-router' is valid for v7.x. Minor style nit: consider adding spaces inside braces ({ Link }) for consistency if the project follows that convention.

---

24-27: LGTM - Correctly replaces anchor with Link for client-side routing.

This change ensures clicking the logo navigates to the home route without a full page reload, directly addressing the white flash issue described in #1020.

---

86-92: LGTM - Settings navigation correctly updated to use Link.

The avatar/settings link now uses client-side routing, maintaining the existing styling and hover effects while preventing unnecessary full page reloads.

---

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