Router unexpectedly slow

[andraaspar]

In the following sample code (which does not work in the Playground for some reason), waiting for Page A to load and then switching to Page B is unexpectedly slow. All other pages work fine. It seems to suspend before the navigation could happen.

The workaround is commented out in AppComp.

Is this a bug, or am I doing something wrong? Is there a better solution?

import { A, HashRouter, Route, RouteSectionProps } from '@solidjs/router'
import { Suspense, createResource, Show, type JSX } from 'solid-js'
import { render } from 'solid-js/web'

function AppComp() {
  return (
    <>
      <style>{`
      .nav.active {
      outline: 3px solid crimson;
    }`}</style>
      <HashRouter root={PageWrapperComp}>
        <Route path={'/'} component={PageXComp} />
        <Route
          path={'/page/:name'}
          component={PageXComp}
          // component={(props) => (
          // 	<Show keyed when={JSON.stringify(props)}>
          // 		<PageXComp {...props} />
          // 	</Show>
          // )}
        />
        <Route path='/another' component={AnotherPageComp} />
      </HashRouter>
    </>
  )
}

function PageWrapperComp(props: { children?: JSX.Element }) {
  return (
    <>
      <p>
        Please wait for the page to load completely before clicking any link.
      </p>
      <div>
        Navigation:{' '}
        <A href='/' end class='nav'>
          Root
        </A>{' '}
        <A href='/page/a' class='nav'>
          Page A
        </A>{' '}
        <A href='/page/b' class='nav'>
          Page B
        </A>{' '}
        <A href='/another' class='nav'>
          Another
        </A>
      </div>
      <div>Content:</div>
      {props.children}
    </>
  )
}

function PageXComp(props: RouteSectionProps) {
  console.log(JSON.stringify(props))
  function getPageName() {
    return props.params.name?.toLocaleUpperCase() ?? 'Root'
  }
  const [resource] = createResource(getPageName, (pageName) => {
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve(`Hi ${pageName}!`)
      }, 3000)
    })
  })
  return (
    <Suspense fallback={'Loading PageXComp...'}>
      <div>This is PageXComp: {resource()}</div>
    </Suspense>
  )
}

function AnotherPageComp() {
  const [resource] = createResource(() => {
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve('Hello!')
      }, 3000)
    })
  })
  return (
    <Suspense fallback={'Loading AnotherPageComp...'}>
      <div>This is AnotherPageComp: {resource()}</div>
    </Suspense>
  )
}

render(() => <AppComp />, document.getElementById('app')!)

[andraaspar]

You can see it live here.

[kurrestahlberg]

I've seen the exact same thing. Rendering the new data is completely delayed until the async function in createResource() completes. If I swap the source from createResource() for a createEffect() that calls refresh() it works exactly how I imagine it should: Other elements are rendered immediately, suspense gets triggered, etc

Changing your example like below should fix it, even though I don't think this is what it should be

const [resource, {refetch}] = createResource(() => {
    const pageName = getPageName()
    return new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve(`Hi ${pageName}!`)
      }, 3000)
    })
  })

createEffect(() => {
     refetch(getPageName())
})

Does anyone know what would be the correct way to fix this? Is it possibly a bug in createResource() or is there just something I've misunderstood?

[andraaspar]

I’d been waiting for a response here for ages, but it never came. My solution was to ditch solidjs/router and never use suspend. Those two features are shaky. Without them, solid is reliable. So long as you don’t accidentally create an infinite effect loop. That is another area that could use some improvement.

[ryansolid]

This is by design. The router bakes in Transitions which mirror paint holding of routing which rendering offscreen. There is an isRouting hook to provide affordances. You can also nest Suspense boundaries as new ones will not participate in Transitions.

You can see more on Transistions here:
https://www.solidjs.com/tutorial/async_transitions

[andraaspar]

Exactly. So the router (and suspense) is suitable for SSR, but broken in client-side-only scenarios. React is having similar issues around suspense, I hear. I’ve been holding off for the WIP suspense primitives I read about in some issue around here. Never heard about nesting suspense boundaries though. How would that solve the issue here?

Edit: I tried to nest suspense boundaries like this, but it did not work.

        <Route
          path={"/page/:name"}
          component={PageXWrapperComp}
        />

// ...

function PageXWrapperComp(props: RouteSectionProps) {
  return (
    <Suspense fallback={"Loading PageXComp inside PageXWrapperComp..."}>
      <PageXComp {...props} />
    </Suspense>
  );
}

Going from Page A to Page B is still slow, and does not show the suspense fallback message. How did you mean that?

[andraaspar]

Thissss dissssscusssssionnnn issss rattttttherrrrr sloowwwwww.