Resource loading from param blocks navigation

https://stackblitz.com/edit/github-xdufjx?file=src%2Froutes%2Fdetail%2F%5Bid%5D%2Findex.tsx
on latest solidstart

export default function DetailPage() {
  const params = useParams();
  const [data] = createResource(
    () => params.id,
    (id) => getData(id)
  );
  return (
    <main>
      <h1>Detail /{params.id}</h1>

      <Suspense fallback={<div>...</div>}>
        <div>{data()?.join(' ')}</div>
      </Suspense>
    </main>
  );
}

export default function DetailPage() {
  const params = useParams();
  const [data] = createResource(
    () => params.id,
    (id) => getData(id)
  );
  return (
    <main>
      <h1>Detail /{params.id}</h1>

      <Suspense fallback={<div>...</div>}>
        <div>{data()?.join(' ')}</div>
      </Suspense>
    </main>
  );
}

When navigating to

/details/a

/details/a

from

, suspense fallback shows. After data loads, now navigate to detail b and see how the page freezes. You can't go to home during this.

Shouldn't the suspense show and not block everything when going a -> b? Not sure if i'm doing something wrong here.

SolidJS•2y ago•

11 replies

Resource loading from param blocks navigation

https://stackblitz.com/edit/github-xdufjx?file=src%2Froutes%2Fdetail%2F%5Bid%5D%2Findex.tsx
on latest solidstart

export default function DetailPage() {
  const params = useParams();
  const [data] = createResource(
    () => params.id,
    (id) => getData(id)
  );
  return (
    <main>
      <h1>Detail /{params.id}</h1>

      <Suspense fallback={<div>...</div>}>
        <div>{data()?.join(' ')}</div>
      </Suspense>
    </main>
  );
}

export default function DetailPage() {
  const params = useParams();
  const [data] = createResource(
    () => params.id,
    (id) => getData(id)
  );
  return (
    <main>
      <h1>Detail /{params.id}</h1>

      <Suspense fallback={<div>...</div>}>
        <div>{data()?.join(' ')}</div>
      </Suspense>
    </main>
  );
}

When navigating to

/details/a

/details/a

from

Resource loading from param blocks navigation

Similar Threads

Resource loading from param blocks navigation

Similar Threads

Similar Threads

Similar Threads