Suspense don't work when switching routes

[FanetheDivine]

Describe the bug

I create routes like this

{
        path: "/",
        component: (props) => (
          <Suspense fallback={<Loading />}>{props.children}</Suspense>
        ),
        children: [
          {
            path: "",
            component: Page,
          },
          {
            path: "test",
            component: (props) => (
              <Suspense fallback={<Loading1 />}>{props.children}</Suspense>
            ),
            children: [
              {
                path: "",
                component: Page1,
              },
            ],
          },
        ],
      }

in Page and Page1's functions, I code like this to show fallback

// src/pages/page.tsx
const Page: Component = () => {
  let num = 1;
  const [data, { refetch }] = createResource(async () => {
    await sleep(1000);
    return ++num;
  });
  return (
    <div style={{ display: "flex", gap: "4px" }}>
      home-{data()}
      <span onClick={refetch}>click to loading</span>
      <A href="/test">to /test</A>
     {/* in src/pages/test/pages this link is to home and href is '/' */}
    </div>
  );
};

when I refech and first load Page, Suspense works
but when I go to '/test' then to '/',Suspense doesn't work
the page stay '/test' for 1s, and then turn to '/'

Your Example Website or App

https://codesandbox.io/p/devbox/428phl

Steps to Reproduce the Bug or Issue

1. start the project
2. click 'click to loading' and find Suspense show fallback
3. click 'to /test' and find Suspense show fallback
4. click 'to /' and find Suspense doesn't work.

Expected behavior

when swicthing routes. Suspense can always show fallback

Screenshots or Videos

No response

Platform

• OS: Linux( in window docker)
• Browser: Chrome
• Version:
  "@solidjs/router": "^0.15.3",
  "solid-js": "^1.9.3"

Additional context

No response

[dennev]

https://docs.solidjs.com/solid-router/getting-started/config

According to the official documentation, the usage is as follows and this works fine.

function App() {
  return (
    <Router>
      {[
        {
          path: "/",
          component: props => <Suspense fallback={<Loading />}>{props.children}</Suspense>,
          children: [
            {
              path: "",
              component: Page
            }
          ]
        },
        {
          path: "/test",
          component: props => <Suspense fallback={<Loading1 />}>{props.children}</Suspense>,
          children: [
            {
              path: "",
              component: Page1
            }
          ]
        }
      ]}
    </Router>
  );
}

I think there is a difference between your and my perception of what suspense is used for. Suspense is defined in the official documentation as

A component that tracks all resources read under it and shows a fallback placeholder state until they are resolved.

And in your use case, the move of "/" > "/test" is the action of a parent component making changes to its child component. From the parent <TopSuspense><Page/></TopSuspense> to <TopSuspense><Suspense>{props.children}</Suspense></TopSuspense>.

Once TopSuspense has completed its initialization, it will no longer be in a fallback state unless the suspense is disposed of and remounted.
If you want to fallback while changing components between children while the parent component is preserved, a component would serve the purpose in a case like your page.

If you want to handle suspense as opposed to combining onMount and Show or other components, configure it as a separate route, as in the example at the beginning, instead of connecting it with children.