[Bug?]: when using FileRoutes initial navigation happens after delay & Suspense doesn't do anything

[illiaChaban]

Duplicates

• [x] I have searched the existing issues

Latest version

• [x] I have tested the latest version

Current behavior 😯

When using FileRoutes with Suspense like in the official example, Suspense doesn't do anything and fallback isn't being displayed.

    <Router root={(props) => <Suspense fallback={<div>loading...</div>}>{props.children}</Suspense>}>
      <FileRoutes />
    </Router>

The current behavior on the initial page navigation (page A > page B) is this:

1. user clicks link (<A> 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

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

Steps to reproduce 🕹

Stackblitz example

Steps:

1. create 2 linked pages (either use <A> 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

Context 🔦

I believe this is unexpected behavior and it doesn't work well with "view transition api"

Your environment 🌎

npmPackages:
    "@solidjs/router": "^0.15.3",
    "@solidjs/start": "^1.1.7",
    "solid-js": "^1.9.9",
    "vinxi": "^0.5.8"

[illiaChaban]

actually, this seems to have the same behavior for manual routes:

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>
  );
}

Maybe this is a bug with Router / root prop itself ?

[ZhangXiChang]

me too