Help understanding createResource

import { render } from "solid-js/web";
import {
  createSignal,
  createResource,
  onMount,
  Switch,
  Match,
  Suspense,
  For,
  Show,
} from "solid-js";

async function fun(idb: boolean): Promise<string[]> {
  return new Promise((resolve, reject) => {
    if (!idb) return resolve([]);

    setTimeout(() => resolve(["a", "b", "c"]), 500);
  });
}

async function get_idb(): Promise<boolean> {
  return new Promise((resolve) => setTimeout(() => resolve(true), 500));
}

function App() {
  const [idb, setIdb] = createSignal<boolean | null>(null);
  const [res, { refetch }] = createResource(idb, fun);

  onMount(async () => {
    const idb = await get_idb();

    setIdb(idb);
  });

  return (
    <div>
      <h1>Hi</h1>
      <Show when={idb()} fallback={<p>loading idb...</p>}>
        <Suspense fallback={<p>loading things...</p>}>
          <Switch>
            <Match when={res()}>
              <p>things:</p>
              <For each={res()}>{(r) => <p>{r}</p>}</For>
            </Match>
            <Match when={res.error}>
              <p>something went wrong...</p>
              <button onClick={refetch}>try again</button>
            </Match>
          </Switch>
        </Suspense>
      </Show>
    </div>
  );
}

render(() => <App />, document.getElementById("app")!);

import { render } from "solid-js/web";
import {
  createSignal,
  createResource,
  onMount,
  Switch,
  Match,
  Suspense,
  For,
  Show,
} from "solid-js";

async function fun(idb: boolean): Promise<string[]> {
  return new Promise((resolve, reject) => {
    if (!idb) return resolve([]);

    setTimeout(() => resolve(["a", "b", "c"]), 500);
  });
}

async function get_idb(): Promise<boolean> {
  return new Promise((resolve) => setTimeout(() => resolve(true), 500));
}

function App() {
  const [idb, setIdb] = createSignal<boolean | null>(null);
  const [res, { refetch }] = createResource(idb, fun);

  onMount(async () => {
    const idb = await get_idb();

    setIdb(idb);
  });

  return (
    <div>
      <h1>Hi</h1>
      <Show when={idb()} fallback={<p>loading idb...</p>}>
        <Suspense fallback={<p>loading things...</p>}>
          <Switch>
            <Match when={res()}>
              <p>things:</p>
              <For each={res()}>{(r) => <p>{r}</p>}</For>
            </Match>
            <Match when={res.error}>
              <p>something went wrong...</p>
              <button onClick={refetch}>try again</button>
            </Match>
          </Switch>
        </Suspense>
      </Show>
    </div>
  );
}

render(() => <App />, document.getElementById("app")!);