I have created a new Remix application where I defer a promise in the loader :

// Index.tsx
import { defer } from "@remix-run/node";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";
import DataFetchingExample from "~/components/data-fetching";
import Loading from "~/components/Loading";

export function loader() {
  const fetchPosts = async () => {
    await new Promise((resolve) => setTimeout(resolve, Number(4000)));
    const response = await fetch(
      "https://jsonplaceholder.typicode.com/photos",
      {
        // disable cache
        cache: "no-store",
      }
    );

    if (!response || response.status !== 200) {
      console.error("Failed to fetch data");
    }

    const data = await response.json();
    const post = data[0];
    return post;
  };

  const promiseRequest = fetchPosts();

  return defer({
    post: promiseRequest,
  });
}

export default function Index() {
  const data = useLoaderData<typeof loader>();
  return (
    <div>
      <h1>Welcome to Remix</h1>

      <Suspense fallback={<Skeleton />}>
        <Await resolve={data.post} errorElement={<p>Could not fetch photos</p>}>
          {(post) => <DataFetchingExample post={post} />}
        </Await>
      </Suspense>
    </div>
  );
}

// components/data-fetching.tsx
type PageProps = {
  post: {
    albumId: number,
    id: number,
    title: string,
    url: string,
    thumbnailUrl: string,
  },
};

export default function DataFetchingExample({ post }: PageProps) {
  return (
    <div>
      <p>Todo: {post?.title}</p>
    </div>
  );
}

I expect to see the skeleton from <Suspense> but it is not showing up when the page is loading…
Instead, the page remains frozen until I receive the promise 🙁

What am I doing wrong?

I expect to see the skeleton from but it is not showing up when the page is loading… Instead, the page remains frozen until I receive the promise 🙁