Delay in loading component with tanstack lazy loading
Hi,
I’m implementing lazy loading with TanStack Router in my React application. I’m facing an issue with a small delay in rendering the component after the URL gets updated. Ideally, the URL should update immediately, and while the new component is loading, a pendingComponent should be displayed. However, in my case, the pendingComponent only shows up on the first page load. For subsequent navigations, the URL updates but there is a small delay in rendering the new component, and during this time, the old component remains visible.
Router Setup
Here is my router setup:
Lazy loading router
• On first page load, the pendingComponent shows up correctly.
• For subsequent navigations, the URL updates, but there is a small delay before the new component is rendered. During this time, the old component remains visible instead of showing the pendingComponent.
Is there any way to ensure that the pendingComponent is displayed until the new component is fully loaded for every navigation?
I’m implementing lazy loading with TanStack Router in my React application. I’m facing an issue with a small delay in rendering the component after the URL gets updated. Ideally, the URL should update immediately, and while the new component is loading, a pendingComponent should be displayed. However, in my case, the pendingComponent only shows up on the first page load. For subsequent navigations, the URL updates but there is a small delay in rendering the new component, and during this time, the old component remains visible.
Router Setup
Here is my router setup:
Lazy loading router
• On first page load, the pendingComponent shows up correctly.
• For subsequent navigations, the URL updates, but there is a small delay before the new component is rendered. During this time, the old component remains visible instead of showing the pendingComponent.
Is there any way to ensure that the pendingComponent is displayed until the new component is fully loaded for every navigation?
