SolidJS•17mo ago

createResource / Suspense blocks rendering

Im trying to understand how to handle async data fetching. Taking an example from the docs, with some modifications. This component seem to block rendering for 5 seconds, before displaying Data fetched from API, rather than showing the fallback in the Suspense element while the setTimeout is happening. I feel like im not understanding something here...

import { createResource, Suspense } from "solid-js";

async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched from API");
    }, 5000); // Simulate a 2-second delay
  });
}
export default function () {
  const [resource] = createResource(fetchData);

  return (
    <Suspense fallback={<p>loading...</p>}>
      <div>HELLO WORLD</div>
      {resource()}
    </Suspense>
  );
}

import { createResource, Suspense } from "solid-js";

async function fetchData(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Data fetched from API");
    }, 5000); // Simulate a 2-second delay
  });
}
export default function () {
  const [resource] = createResource(fetchData);

  return (
    <Suspense fallback={<p>loading...</p>}>
      <div>HELLO WORLD</div>
      {resource()}
    </Suspense>
  );
}

7 Replies

Jasmin•17mo ago

It should work thinkies

Have a look here: https://playground.solidjs.com/anonymous/b990a527-c631-4a60-a2f8-3792fbe13021 Maybe something else makes the component block

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

the magic guyOP•17mo ago

Hmm odd… What could cause the entire component to block…?

Jasmin•17mo ago

something higher up probably. you could share the code and i can have a look if you want :)

Martnart•17mo ago

Do you have SSR enabled? Loading a page via SSR will wait for resources to be resolved. CSR will trigger the Suspense instead as you would expect, i.e. navigating from another page.

the magic guyOP•17mo ago

The code is here. Im using the template from solid start https://github.com/shawnyu5/FreshMeet/blob/feat/suspend/frontend/src/routes/meetup/test.tsx uh how do I tell what i am using?

Martnart•17mo ago

By default SSR is on in solid start. Try changing the vite config plugin line to this: plugins: [solid({ ssr: false })]

the magic guyOP•17mo ago

ahh interesting... That did it thanks!

Gaming

Programming

createResource / Suspense blocks rendering