-
Notifications
You must be signed in to change notification settings - Fork 172
Open
Description
Describe the bug
When using top level Suspense like in the official example, Suspense doesn't do anything and fallback isn't being displayed.
This behavior is consistent when using file routes or manual router
<Router root={(props) => <Suspense fallback={<div>loading...</div>}>{props.children}</Suspense>}>
<FileRoutes />
</Router>
const Landing = lazy(() => import('./routes/index'));
const About = lazy(() => import('./routes/about'));
export default function App() {
return (
<Router
root={(props) => (
<>
<Nav />
<Suspense fallback={<div>loading...</div>}>{props.children}</Suspense>
</>
)}
>
<Route path="" component={Landing} />
<Route path="/about" component={About} />
</Router>
);
}
I think this is a bug with Router / root prop itself.
The current behavior on the initial page navigation (page A > page B) is this:
- user clicks link ( element or button with manual "useNavigate" handling)
- "navigate" is called
- next page's assets load
- url is updated
- new page is displayed
Notice, that fallback page is never displayed and url is only updated after next page assets fully load
Your Example Website or App
Steps to Reproduce the Bug or Issue
- create 2 linked pages (either use component or button with manual "useNavigate") with FileRoutes
- add "fallback" parameter to top level Suspence
- add a long running resource on page B so it's easier to spot what's going on
(createResource(() => wait(5000))) - compile, navigate from page A to page B
- observe: link clicked > nothing happens (assets load) > url & page updated
Expected behavior
- user clicks link
- "navigate" is called
- url is updated (without delay) & Suspence fallback page is shown
- next page's assets load
- new page is displayed
Screenshots or Videos
No response
Platform
"@solidjs/router": "^0.15.3",
"@solidjs/start": "^1.1.7",
"solid-js": "^1.9.9",
"vinxi": "^0.5.8"
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels