stormy-gold

<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>
  );
}

8 Replies

stormy-goldOP•9mo ago

@Manuel Schiller ??

sensitive-blue•9mo ago

For me its not hiding the whole page but showing the fallback when the data is preloaded. Using react though.

stormy-goldOP•9mo ago

yeah its likely to work if you're using react, solid version of tanstack router is relatively new

sensitive-blue•9mo ago

Well, idk, im having some weird behavior with preloading deferred data as well. https://github.com/TanStack/router/issues/3766

GitHub

shows pending component despite data having been preloaded · Issue...

Which project does this relate to? Router Describe the bug When hovering over a link to a file based page and its data preloads fully, when navigating the data is retrieved again despite having bee...

continuing-cyan•9mo ago

If you wrap the <Await> in a suspense boundary I think you get what you want It's a difference in how suspense is handled I think

stormy-goldOP•9mo ago

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

const loader = async () => {
  "use server";
  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>

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

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

const loader = async () => {
  "use server";
  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>

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

this is my code now, it works, but it refetches on the client again after initial ssr

continuing-cyan•9mo ago

As far as I know this isn't ssr (or are you using start?)

stormy-goldOP•9mo ago

im using solidstart with ssr

Gaming

Programming

<Await> hiding the entire page until data is resolved

Did you find this page helpful?