<Await> hiding the entire page until data is resolved

import { Await, createFileRoute } from "@tanstack/solid-router";

const loader = async () => {
  await new Promise((r) => setTimeout(r, 2000));

  return { hello: "world" };
};

export const Route = createFileRoute("/")({
  component: RouteComponent,
  loader: () => {
    const slowDataPromise = loader();

    return {
      deferredSlowData: slowDataPromise,
    };
  },
});

function RouteComponent() {
  const data = Route.useLoaderData();

  return (
    <main>
      <h1>Hello world!</h1>

      <Await promise={data().deferredSlowData} fallback={<div>Loading...</div>}>
        {(data) => {
          return <div>{data.hello}</div>;
        }}
      </Await>
    </main>
  );
}

import { Await, createFileRoute } from "@tanstack/solid-router";

const loader = async () => {
  await new Promise((r) => setTimeout(r, 2000));

  return { hello: "world" };
};

export const Route = createFileRoute("/")({
  component: RouteComponent,
  loader: () => {
    const slowDataPromise = loader();

    return {
      deferredSlowData: slowDataPromise,
    };
  },
});

function RouteComponent() {
  const data = Route.useLoaderData();

  return (
    <main>
      <h1>Hello world!</h1>

      <Await promise={data().deferredSlowData} fallback={<div>Loading...</div>}>
        {(data) => {
          return <div>{data.hello}</div>;
        }}
      </Await>
    </main>
  );
}