Working abort signal when loader returns deferred data with a promise

[shura-v]

Hello!

Continuing from the issue.

In version 6.14.2 abort controllers are being cleaned up and ignored after navigation is completed, e.g. when a promise in deferred data is provided and page component which utilizes Suspense/Await for that data is rendered.

What I would love to have is the ability to automatically abort the request after the component is rendered - beforel all promises in deferred data are settled when navigating to another page. Right now the only way to do so is not using request's signal at all, but rather manually creating my own abort controller and working with it.

Desired behavior

Consider the situation below where user navigates to the /info page with some information and, say, a huge chart. User reads the description on the page and does not want to wait for the chart data to load - clicks "Home" and request to chart data is aborted, thus reducing the load on his client side and server side as well.

import { Suspense } from "react";
import {
  RouterProvider,
  createBrowserRouter,
  Link,
  Outlet,
  defer,
  Await,
  useLoaderData,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    element: (
      <>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/info">Info</Link>
          </li>
        </ul>
        <Outlet />
      </>
    ),
    children: [
      {
        index: true,
        element: <>Index</>
      },
      {
        path: "info",
        loader({ request }) {
          request.signal.addEventListener("abort", () => {
            console.log("signal aborted");
          });
        
          return defer({
            info: fetch('/api/very_heavy_chart_data_request', { signal: request.signal })
          });
        },
        Component() {
          const { info } = useLoaderData();

          return (
            <>
              <h1>Info</h1>
              <h2>Description</h2>
              ......
             
              <h2>Some chart which takes a very long time to load</h2> 

              <Suspense fallback={<>Loading...</>}>
                <Await resolve={info}>
                  {data => data}
                </Await>
              </Suspense>
            </>
          );
        }
      }
    ]
  }
]);

export default function App() {
  return <RouterProvider router={router} />;
}

[hellyet]

Still no fix?