SolidJS•2mo ago

How to make use of <Suspense>

I have some code that I think might benefit from the Suspense component. I understand that for suspense to work the actual component being rendered needs to be asynchronous, but I don't understand how I can make the OsFolderCard async as the get_os_folders function returns all of them at once. If someone could explain how I could do that, or if it's even beneficial or not bcz of the way I fetch my data

export default function Dashboard() {
  const [user, setUser] = createSignal<UserType | null>(null);
  const [osFolders, setOsFolders] = createSignal<OsFolder[]>([]);
  const [error, setError] = createSignal<string | null>(null);
  const navigate = useNavigate();

  onMount(async () => {
    const user = await get_default_user();
    if (user) {
      setUser(user);
      get_os_folders(user.id).then((folders) => {
        if (folders) {
          setOsFolders(folders);
        }
      })
    }
    let error = await mpv_system_check();
    setError(error);
  });

  return (
    <main>
      <NavBar />
      <Show when={error()}>
        <ErrorAlert error={error()!} onClick={() => navigate(`/settings/mpv_ERROR_${error()}`)} />
      </Show>
      <section class="h-fit py-4 px-3 md:px-16 lg:px-36 xl:px-44 flex flex-row gap-2">
        <div class="grid grid-cols-4 gap-2 min-h-[calc(4*cardHeight)]">
          <Show when={user() && osFolders() && osFolders()?.length > 0} fallback={
            <Skeleton class="h-32 w-24 sm:h-44 sm:w-32 md:h-48 md:w-36 lg:h-52 lg:w-40" />
          }>
            <For each={osFolders()}>
              {(folder) => (
                <OsFolderCard folder={folder} user={user} setOsFolders={setOsFolders} />
              )}
            </For>
          </Show>
          <Show when={user()}>
            <AddNewSkeleton user={user} setOsFolders={setOsFolders} />
          </Show>
        </div>
      </section>
    </main>
  );
}

export default function Dashboard() {
  const [user, setUser] = createSignal<UserType | null>(null);
  const [osFolders, setOsFolders] = createSignal<OsFolder[]>([]);
  const [error, setError] = createSignal<string | null>(null);
  const navigate = useNavigate();

  onMount(async () => {
    const user = await get_default_user();
    if (user) {
      setUser(user);
      get_os_folders(user.id).then((folders) => {
        if (folders) {
          setOsFolders(folders);
        }
      })
    }
    let error = await mpv_system_check();
    setError(error);
  });

  return (
    <main>
      <NavBar />
      <Show when={error()}>
        <ErrorAlert error={error()!} onClick={() => navigate(`/settings/mpv_ERROR_${error()}`)} />
      </Show>
      <section class="h-fit py-4 px-3 md:px-16 lg:px-36 xl:px-44 flex flex-row gap-2">
        <div class="grid grid-cols-4 gap-2 min-h-[calc(4*cardHeight)]">
          <Show when={user() && osFolders() && osFolders()?.length > 0} fallback={
            <Skeleton class="h-32 w-24 sm:h-44 sm:w-32 md:h-48 md:w-36 lg:h-52 lg:w-40" />
          }>
            <For each={osFolders()}>
              {(folder) => (
                <OsFolderCard folder={folder} user={user} setOsFolders={setOsFolders} />
              )}
            </For>
          </Show>
          <Show when={user()}>
            <AddNewSkeleton user={user} setOsFolders={setOsFolders} />
          </Show>
        </div>
      </section>
    </main>
  );
}

1 Reply

Brendonovich•2mo ago

To use Suspense you also need to use createResource in some form to load your data - the component shouldn’t be async. In this case you’ll want to call get_os_folders inside createResource instead of in onMount, and then wherever you read the resource’s data the nearest Suspense will be triggered

Gaming

Programming

How to make use of <Suspense>