Skip to content

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

@pyryk

Description

@pyryk

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:

Screen.Recording.2025-06-16.at.22.55.52.mov

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions