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

Data fetched from API

Data fetched from API

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

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

createResource / Suspense blocks rendering

Similar Threads

Similar Threads

Similar Threads