Deprecation of debounce hooks and clientLoader example

[ananni13]

I noticed that useDebounceFetcher and useDebounceSubmit will be deprecated in the next version in favor of debouncing at the clientLoader level, which I agree is probably a better approach most of the times.

However, how does the provided example work?

import { setTimeout } from "node:timers/promises";

export async function clientLoader({
  request,
  serverLoader,
}: Route.ClientLoaderArgs) {
  return await setTimeout(500, serverLoader, { signal: request.signal });
}

We're importing and using node stuff, setTimeout from node:timers, inside a client only loader. To my understanding, this is not possible right?

[anthonyhagi]

I agree that this should be reconsidered. Another thing this does is mess with the types that are returned in the component. With the following code, the standard loader is giving me the correct type hints, but the clientLoader is not. This can be seen with the following example:

export async function loader(_: Route.LoaderArgs) {
  return { foo: "bar" };
}

export async function clientLoader({
  request,
  serverLoader,
}: Route.ClientLoaderArgs) {
  return await setTimeout(500, serverLoader, { signal: request.signal });
}

export default function Page({ loaderData }: Route.ComponentProps) {
  return <div></div>;
}

Hovering over the loaderData key in the component results in the following type:

loaderData: {
    foo: string;
} | (() => Promise<{
    foo: string;
}>)

Now, changing this back to calling the server loader directly:

export async function clientLoader({ serverLoader }: Route.ClientLoaderArgs) {
  return await serverLoader();
}

It now results in the correct following derived type in the component:

loaderData: {
    foo: string;
}

Now, the best way to actually go about this would be to do things more manually with a raw Promise. The following code seems to work well for me in terms of debouncing and type hinting:

export async function clientLoader({
  request,
  serverLoader,
}: Route.ClientLoaderArgs) {
  return new Promise(
    (resolve: (value: Awaited<ReturnType<typeof serverLoader>>) => void) => {
      const fn = async () => {
        resolve(await serverLoader());
      };

      setTimeout(fn, 300, { signal: request.signal });
    }
  );
}