HydrateFallback does not render on back nav

[LouiseReid]

I have a route that only has a client loader which makes an api call. On initial page load/hard refresh the fallback will show until the data from the api is returned.

The data then populates cards that will link through to a /:id page. Within this page I have a back navigation button but when this is clicked the previous page loads without rendering the HydrateFallback. It is the same behaviour if I use the native browser back nav.

The client route that makes an api call sits within an Outlet. When I back nav I also don't see the other layout elements, instead I just see the top level root.tsx components.

Why is this happening? Do I need to do anything else to ensure the fallback shows on back navigations?

Rough example of my route

const Searching = () => (
  <>
    <p className="mb-sm">Searching...</p>
    <ProgressBar />
  </>
);

export const clientLoader: LoaderFunction = async ({ params }) => {

  const data = await getData();

  return { results: data.results };
};

export function HydrateFallback() {
  return (
    <div className="flex-1 px-md md:px-base mt-base">
      <Searching />
      <div className="mt-base">
        {Array.from({ length: 10 }, (_, index) => (
          <SkeletonCard key={index} />
        ))}
      </div>
    </div>
  );
}

export default function Results() {
  const navigation = useNavigation();
  const isLoading = navigation.state === "loading";
  const { results } = useLoaderData<typeof clientLoader>();

  return (
    <div className="flex-1 px-md md:px-base mt-base">
      {isLoading && <Searching />}
      <ResultsInfoBar resultCount={results.length} />
      <div className="flex flex-col mt-base">
        {results.map((result: Itinerary) => (
          <Card
            key={result.id}
          />
        ))}
      </div>
    </div>
  );
}

My layout route which I would expect to see whilst the sub route is calling the client loader

export default function ResultsLayout() {
  return (
    <>
      <Summary />
      <div className="flex">
        <Filters />
        <Outlet />
      </div>
    </>
  );
}

[LouiseReid]

I'm assuming this is due to the app already being hydrated. My solution is just to move my data fetcher into a hook used within the component.

Initially I put it in a loader, but the server making the request made the page load slow (could fix this with Suspense and Await I guess).

Then clientLoader felt right with the HydrateFallback, but navigating back to the page had the issue of not hitting this