I have followed the guide for Client Data in the Remix Docs to implement client-side filtering for a list of products. However, even though I have set clientLoader.hydrate to true, the site renders the unfiltered products (i.e., the products returned from the server loader) for a moment before rendering the filtered products (from the client loader).

let isInitialRequest = true
let initialLoaderData: ReturnType<typeof useLoaderData<typeof loader>> | null =
  null

// @ts-expect-error Weird error referencing weird stuff
export async function clientLoader({
  request,
  serverLoader,
}: ClientLoaderFunctionArgs) {
  if (isInitialRequest) {
    isInitialRequest = false
    initialLoaderData = await serverLoader<typeof loader>()
  }

  if (initialLoaderData) {
    const { proteinFilters, priceFilters } =
      getProductFiltersFromRequest(request)

    const filteredProducts = filterProducts(initialLoaderData.products, {
      proteins: proteinFilters,
      priceFilters,
    })

    return {
      ...initialLoaderData,
      products: filteredProducts,
    }
  }
  return null
}

clientLoader.hydrate = true

Please help. I thought clientLoader.hydrate = true was supposed to fix this exact issue.