SolidJS•17mo ago

Transition state getting lost after an await inside ResourceFetcher

https://playground.solidjs.com/anonymous/c2f53a7d-9e76-4711-8e81-aa6bc2de12c6 Check the above link to see it in action Say if we have the following signal

const [show, setShow] = createSignal(false);

const [show, setShow] = createSignal(false);

And if we call setShow(true) within startTransition

startTransition(() => setShow(true));

startTransition(() => setShow(true));

And somewhere inside ResourceFetcher the value of show() is different above & below an await point as shown below

  console.log('show=', show()); // true
  await new Promise((r) => setTimeout(r, 1));
  console.log('show=', show()); // false !!!

  console.log('show=', show()); // true
  await new Promise((r) => setTimeout(r, 1));
  console.log('show=', show()); // false !!!

Solid Playground

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

4 Replies

Raqueebuddin Aziz•17mo ago

If you do use an actual resource with createResource then transitions will work correctly

const Greeting = lazy(async () => {
  createResource(show, async show => {
    console.log('show=', show);
    await new Promise((r) => setTimeout(r, 3000));
    console.log('show=', show);
  })
  return import("./tab1");
});

const Greeting = lazy(async () => {
  createResource(show, async show => {
    console.log('show=', show);
    await new Promise((r) => setTimeout(r, 3000));
    console.log('show=', show);
  })
  return import("./tab1");
});

this works

SreeniOP•17mo ago

That works because it's passed in as a value and not a signal anymore. Check the updated link using createResource and the value of a signal show2 is getting lost. Does it mean, we cannot access other signals/store inside createResource other than the one being passed as a param? https://playground.solidjs.com/anonymous/cb2803bc-4039-4e5b-832e-5e6e22b79828

Solid Playground

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

Raqueebuddin Aziz•17mo ago

Any signals the resource depends on you need to pass it as a source because suspense with transitions creates a fork of all the sources If you don't pass it as a source, nothing stops the signal from changing You can pass multiple sources like () => [a(), b()]

SreeniOP•17mo ago

Got it. Thanks

Gaming

Programming

Transition state getting lost after an await inside ResourceFetcher