createResource does not trigger suspense when its first-argument signal changes

I have a modal component, with its open state managed by a signal. I want to fetch the data that should be displayed in the modal only once the modal is opened by the user and display a loading message while data is still loading. However, Suspense is not triggered in my case, and I don't really understand why. Isn't it supposed to be triggered in this case?

function MyComp(props: { id: string }) {
  const [open, setOpen] = createSignal(false);
  const [data] = createResource(open, () => load(props.id), {});

  return (
    <Dialog open={open()} onOpenChange={({ open }) => setOpen(open)}>
      <Suspense fallback="Loading...">
        <DialogContent data={data()} />
      </Suspense>
    </Dialog>
  );
}

function MyComp(props: { id: string }) {
  const [open, setOpen] = createSignal(false);
  const [data] = createResource(open, () => load(props.id), {});

  return (
    <Dialog open={open()} onOpenChange={({ open }) => setOpen(open)}>
      <Suspense fallback="Loading...">
        <DialogContent data={data()} />
      </Suspense>
    </Dialog>
  );
}

function MyComp(props: { id: string }) {
  const [open, setOpen] = createSignal(false);
  const [data] = createResource(open, () => load(props.id), {});

  return (
    <Dialog open={open()} onOpenChange={({ open }) => setOpen(open)}>
      <Suspense fallback="Loading...">
        <DialogContent data={data()} />
      </Suspense>
    </Dialog>
  );
}

function MyComp(props: { id: string }) {
  const [open, setOpen] = createSignal(false);
  const [data] = createResource(open, () => load(props.id), {});

  return (
    <Dialog open={open()} onOpenChange={({ open }) => setOpen(open)}>
      <Suspense fallback="Loading...">
        <DialogContent data={data()} />
      </Suspense>
    </Dialog>
  );
}

createResource does not trigger suspense when its first-argument signal changes

Similar Threads

Similar Threads

Similar Threads