Skip to content

[Bug]: Top level (root) Suspense is ignored #544

@illiaChaban

Description

@illiaChaban

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:

  1. user clicks link ( element or button with manual "useNavigate" handling)
  2. "navigate" is called
  3. next page's assets load
  4. url is updated
  5. 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

Stackblitz example

Steps to Reproduce the Bug or Issue

  1. create 2 linked pages (either use component or button with manual "useNavigate") with FileRoutes
  2. add "fallback" parameter to top level Suspence
  3. add a long running resource on page B so it's easier to spot what's going on (createResource(() => wait(5000)))
  4. compile, navigate from page A to page B
  5. observe: link clicked > nothing happens (assets load) > url & page updated

Expected behavior

  1. user clicks link
  2. "navigate" is called
  3. url is updated (without delay) & Suspence fallback page is shown
  4. next page's assets load
  5. 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

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