T
TanStack•6mo ago
wise-white

<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
wise-white
wise-whiteOP•6mo ago
@Manuel Schiller ??
deep-jade
deep-jade•6mo ago
For me its not hiding the whole page but showing the fallback when the data is preloaded. Using react though.
wise-white
wise-whiteOP•6mo ago
yeah its likely to work if you're using react, solid version of tanstack router is relatively new
deep-jade
deep-jade•6mo 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...
exotic-emerald
exotic-emerald•6mo 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
wise-white
wise-whiteOP•6mo 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
exotic-emerald
exotic-emerald•6mo ago
As far as I know this isn't ssr (or are you using start?)
wise-white
wise-whiteOP•6mo ago
im using solidstart with ssr

Did you find this page helpful?