Show Loading on subsequent loader calls

[mild shale]

I'm using Remix to build a dashboard of charts. I set up a route with a loader that queries for the data needed. I followed the Streaming doc to return promises in a call to the defer function. That all works and I'm using <Suspense /> to give a nice loading indicator. The problem now is getting the loading indicator to show up when I filter the data. I am using URL Search Params to change the URL with filter options. That triggers the loader to run again, but I never see the loading indicator again. Does anyone know what's going on or how to fix this?

[dull kernel]

Add a key to the suspense based on the URL + search params.

[mild shale]

I tried it, but it didn't work. I added the key to the Suspense element and the Await element within it.

I was able to get it to work like this

import { Await, useLoaderData, useNavigation } from "@remix-run/react";
import { Suspense } from "react";

export async function loader({ request }) {
  const url = new URL(request.url);
  const query = url.searchParams.get("query") || "default";
  return defer({
    data: fetchData(query)
  });
}

export default function YourComponent() {
  const { data } = useLoaderData();
  const navigation = useNavigation();
  const isLoading = navigation.state === "loading";

  return (
    <Suspense fallback={<LoadingIndicator />}>
      <Await 
        resolve={data} 
        errorElement={<ErrorComponent />}
        key={navigation.location?.search || "default"}
      >
        {(resolvedData) => (
          <div>
            {isLoading ? <LoadingIndicator /> : null}
            <DataDisplay data={resolvedData} />
          </div>
        )}
      </Await>
    </Suspense>
  );
}

But, I have multiple promises and I think this will show loading if any of them are still running. I only want to show loading for the promise that this component depends on.