router icon indicating copy to clipboard operation
router copied to clipboard

RouterState status stays "pending" indefinitely when showing an error component for a route that has lazy-loaded children

Open pyryk opened this issue 6 months ago • 0 comments

Which project does this relate to?

Router

Describe the bug

Given the following scenario:

  • The app uses code-based routing
  • There is route with a path parameter parsing functionality and a child route defined
  • There is an error component defined for the said route
  • The child route has its component defined as lazily-loaded (lazyRouteComponent(...))

If parsing the path parameter causes an error, the RouterState.status stays pending indefinitely even though the app does not intent to show the lazily-loaded component.

Your Example Website or App

https://stackblitz.com/edit/github-x9j3pnhy?file=src%2Fmain.tsx

Steps to Reproduce the Bug or Issue

  1. Open the Stackblitz link from above
  2. Modify the preview window URL directly to include pathname /lang/es/lazy or /lang/es/eager (this is necessary to trigger a validation error in parameter parsing)
  3. Observe the "router status" element at the top of the preview

Expected behavior

As a developer, I was expecting the router status to be "idle" on both cases (/lang/es/lazy and /lang/es/eager). However, in the lazy-loading case, the status stays "pending" indefinitely.

From what I can gather, the app does not initiate downloading the lazily-loaded component in this case.

Screenshots or Videos

Screen cap of the described behavior:

https://github.com/user-attachments/assets/c8058c55-53db-4bc1-8310-aa73bed9afaf

Platform

  • OS: I'm assuming this happens on every platform. I've reproduced this with macOS (15.5, M4)
  • Browser: Chrome 137.0.7151.104, Firefox 139.0.1

Additional context

No response

pyryk avatar Jun 16 '25 20:06 pyryk