How to use server function & suspense

async function getUserInfo() {
  "use server";
  // Mimics server speed, network latency, etc.
  await new Promise((resolve) => setTimeout(resolve, 300));

  // TO-DO: real data / connections here
  return {
    avatar: "~/assets/img/placeholders/generic-avatar.jpg",
    name: "User Name",
    email: "[email protected]",
  };
}

//... component defined
  const [fetchedInfo] = createResource(getUserInfo);

  return (
    <Suspense fallback={<UserInfoFallback />}>
          <img
            class="aspect-square size-full"
            src={fetchedInfo()?.avatar}
            decoding="sync"
            loading="eager"
            alt="User Avatar"
            draggable="false"
          />
        <span class="text-neutral-content flex w-full flex-col gap-0.5 truncate text-left">
          <p class="block truncate text-sm font-semibold">
            {fetchedInfo()?.name}
          </p>
          <p class="block truncate text-[0.7rem] font-light">
            {fetchedInfo()?.email}
          </p>
        </span>
    </Suspense> )