👻 Upgrade react-router-dom

[carlosthe19916]

Upgrading react-router-dom to the next major version

It is not documented but in order for React.Suspense to work, it needs to be defined in the definition of the router itself thought the "element" field.

This PR adds a component "Lazy" that wraps each router component, without it, the Spinner that is rendered before each page is loaded in the browser, it's not rendered.

The docs from https://reactrouter.com/upgrading/v6#v7_starttransition helped a to diagnose the upgrade path.

Summary by Sourcery

Upgrade to react-router-dom v7 and implement per-route lazy loading by introducing a Lazy wrapper for Suspense fallbacks

Enhancements:

• Add a Lazy wrapper component to apply React.Suspense with a Spinner fallback per route
• Update all route definitions to wrap their elements with the Lazy component
• Remove the global Suspense fallback, delegating lazy loading to individual routes

Build:

• Upgrade react-router-dom dependency to v7.8.1

[sourcery-ai]

Reviewer's Guide

This PR upgrades react-router-dom to the next major version and refactors the routing setup by introducing a Lazy component that wraps each route in a Suspense boundary, replacing the previous global Suspense placement.

Sequence diagram for route rendering with Lazy and Suspense

sequenceDiagram
  participant Browser
  participant AppRoutes
  participant Lazy
  participant Suspense
  participant Spinner
  participant PageComponent

  Browser->>AppRoutes: Navigates to a route
  AppRoutes->>Lazy: Renders route element
  Lazy->>Suspense: Wraps component with fallback
  Suspense->>Spinner: Shows spinner while loading
  Suspense-->>PageComponent: Loads page component
  Spinner-->>Suspense: Spinner hidden after load
  Suspense-->>Lazy: Renders loaded component
  Lazy-->>AppRoutes: Returns rendered component

Loading

Class diagram for the new Lazy component and updated AppRoutes

classDiagram
  class Lazy {
    +component: React.ReactNode
    +render(): React.ReactNode
  }
  class AppRoutes {
    +render(): React.ReactNode
  }
  Lazy <.. AppRoutes: used by

Loading

File-Level Changes

Change	Details	Files
Upgraded react-router-dom to v7	Bumped react-router-dom version in client/package.json Updated lockfile to reflect new dependency version	client/package.json package-lock.json
Introduced per-route Suspense via a Lazy wrapper	Defined Lazy component with Spinner fallback Removed global Suspense wrapper around allRoutes Wrapped every route element in Lazy to ensure Spinner displays	client/src/app/Routes.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey there - I've reviewed your changes - here's some feedback:

• Rename the prop from component to element in the Lazy wrapper to align with React Router’s element field and improve consistency.
• Extract the Lazy helper into its own module to keep Routes.tsx focused on route definitions and reduce file bloat.
• Consider leveraging React Router v7’s built-in lazy route API (or createBrowserRouter) for code-splitting instead of manually wrapping every route with Suspense.

Prompt for AI Agents

Please address the comments from this code review:
## Overall Comments
- Rename the prop from `component` to `element` in the Lazy wrapper to align with React Router’s `element` field and improve consistency.
- Extract the Lazy helper into its own module to keep Routes.tsx focused on route definitions and reduce file bloat.
- Consider leveraging React Router v7’s built-in lazy route API (or createBrowserRouter) for code-splitting instead of manually wrapping every route with Suspense.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 58.30%. Comparing base (888b0d3) to head (83fac7e).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #656      +/-   ##
==========================================
+ Coverage   57.28%   58.30%   +1.02%     
==========================================
  Files         146      146              
  Lines        2430     2432       +2     
  Branches      552      552              
==========================================
+ Hits         1392     1418      +26     
+ Misses        833      809      -24     
  Partials      205      205              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.