[Bug?]: Screen flickers on createResource changed

[brubanov]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Source

demo: https://stackblitz.com/edit/github-r5fquo?file=src%2Froutes%2Fabout.tsx

import { createSignal, createResource } from 'solid-js';
import { render } from 'solid-js/web';

const fetchUser = async (id) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

export default function Select() {
  const [userId, setUserId] = createSignal();
  const [user, { refetch }] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(e.currentTarget.value)}
      />
      <button onClick={refetch}>refetch</button>
      <span>{user.loading && 'Loading...'}</span>
      <div>
        <pre>{JSON.stringify(user(), null, 2)}</pre>
      </div>
    </>
  );
}

Steps to reproduce 🕹

Steps:

1. createResource
2. update resource

Screen.Recording.2024-08-26.at.18.44.19.mov

[ryansolid]

More than likely this is triggering a top level Suspense. I suggest inserting lower Suspense boundaries add loading states lower in the hierarchy.

[brubanov]

More than likely this is triggering a top level Suspense. I suggest inserting lower Suspense boundaries add loading states lower in the hierarchy.

How can I do this? Or where can I find examples?

[zobweyt]

How can I do this?

To handle this properly, wrap user() call in <Suspense> boundaries like below:

import { createSignal, createResource, Show, Suspense } from 'solid-js';

const fetchUser = async (id: number) =>
  (await fetch(`https://swapi.dev/api/people/${id}/`)).json();

export default function Select() {
  const [userId, setUserId] = createSignal<number>();
  const [user, { refetch }] = createResource(userId, fetchUser);

  return (
    <>
      <input
        type="number"
        min="1"
        placeholder="Enter Numeric Id"
        onInput={(e) => setUserId(Number(e.currentTarget.value))}
      />

      <button onClick={refetch}>Refetch</button>

      <div>
        <Show when={user.loading}>
          <p>Loading...</p>
        </Show>

        {/* Wrap `user()` in `<Suspense>` */}
        <Suspense>
          <pre>{JSON.stringify(user(), null, 2)}</pre>
        </Suspense>
      </div>
    </>
  );
}

Without <Suspense>, when you fetch data and it’s not immediately available, the component may render with an empty state, leading to a flicker effect when the new data finally arrives. This flickering happens because the component re-renders as soon as the data is fetched.

Or where can I find examples?

https://docs.solidjs.com/reference/components/suspense