using suspense to render skeleton HTML with a critical and long running loader

[dagda1]

I have an expensive loader that calls the mdx-bundler, it is critical and is also used by the meta function:

export const loader: LoaderFunction = async ({ params }) => {
  const slug = params.slug;
  if (!slug) {
    throw new Response('Not found', { status: 404 });
  }

    // bundleMdx etc. from mdx-bundler
  return await getPost(slug);

};

export const meta: V2_MetaFunction = ({
  location,
  data: {
    frontmatter: { meta },
  },
}: {
  location: Location;
  data: { frontmatter: FrontMatter; code: string };
}) => {
  return [
    { title: meta.title },
    { property: 'og:url', content: location.pathname },
    { property: 'og:description', content: meta.description },
    { property: 'og:image', content: meta.image },

I cannot use defer because the loader is critical so when a user clicks a link and there is nothing in the cloudfront cache, then there is no rendering until the loader function has resolved.

It is only a problem when there is nothing in the cloudfront cache but I cannot guarantee non-cached calls so is there anyway I can split this up further to get something on the screen while the loader is resolving?

Maybe nested routes?

[sergiodxa]

You can use the useNavigation hook to know when a navigation is pending after the user clicks a link and render a loading UI.

[chrisvltn]

In case someone lands here from search:

Remix now supports clientLoader, which might help building this a bit better.

export async function loader() {
  // During SSR, we talk to the DB directly
  const users = await getServerDataFromDb();
  return json({users});
}

export async function clientLoader({ serverLoader }: ClientLoaderFunctionArgs) {
  return {
    users: serverLoader().then(res => res.users),
  };
}

export default function Component() {
  const { users } = useLoaderData<typeof clientLoader>();
  return (
    <Suspense fallback={<SkeletonPage />} >
      <Await resolve={users}>
        {(users) => users.map((user) => <UserCard key={card.id} user={user} />)}
      </Await>
    </Suspense>
  );
}

In that example, clientLoader returns the same data as loader, but in a Promise.

This allows us to use React Suspense to render a SkeletonPage fallback component while the data is being fetched.

Here is a working CodeSandbox example: https://codesandbox.io/p/devbox/reverent-panna-jggxzz