Optimistically re-render non deferred parts when using deferred content after initial load

[JorritSalverda]

Using defer, Suspense and Await works beautifully for first load or when a component gets unmounted and remounted again. But when changing some props on the same route through navigation - with pagination for example - all re-rendering waits for the deferred content to be ready.

The example below shows this very nicely in that before the initial deferred content is loaded and the fallback is still visible you can quickly use prev/next and the page number between those links immediately updates. Once the suspended fallback is replaced by the actual content using prev/next will wait for the deferred content to be ready before re-rendering the pagination. This leads to a suboptimal experience for the end user.

Is there anything that can be done to have the pagination stay responsive after the deferred content is loaded? I know it can be done with state, but then all links need an onClick handler. And it doesn't seem to automatically cancel the outstanding promises.

import type { LoaderFunctionArgs } from "@remix-run/cloudflare";
import { defer } from "@remix-run/cloudflare";
import { Await, Link, useLoaderData, useParams } from "@remix-run/react";
import { Suspense } from "react";

async function getPage(page: number) {
  await new Promise(f => setTimeout(f, 5000));
  return page
}

export const loader = async ({ params }: LoaderFunctionArgs) => {
  let page = params.page ? +params.page : 1;
  return defer({
    getPage: getPage(page),
  });
};

export default function MySimpl() {
  const { getPage } = useLoaderData<typeof loader>();
  const params = useParams();
  let page = params.page ? +params.page : 1;

  return (
    <div className="flex flex-col gap-6">
      <div className="flex gap-6">
        {page <= 1 ? (
          <span className="bg-white rounded-xl p-3 text-slate-400">previous</span>
        ) : (
          <Link to={`/test/${page - 1}`} className="bg-white rounded-xl p-3 hover:text-cyan-600">previous</Link>
        )}
        <span className="bg-white rounded-xl p-3">{page}</span>
        <Link to={`/test/${page + 1}`} className="bg-white rounded-xl p-3 hover:text-cyan-600">next</Link>
      </div>
      <Suspense fallback={<div className="bg-white rounded-xl p-3">Loading..</div>}>
        <Await resolve={getPage}>
          {(getPage) =>
            <div className="bg-white rounded-xl p-3">
              page: {getPage}
            </div>
          }
        </Await>
      </Suspense>
    </div>
  )
}