Next.js not showing loading.tsx while static route is loading

Other similar questions didn't solve my problem. I have a route like:

export default async function PromptListPage() {
  const prompts: PromptListItem[] = await fetchPromptsFromDB();
  return (
    <main>
      ...
      <div>
        <PromptList prompts={prompts} />
      </div>
    </main>
  );
}

I also have a loading.tsx under the same sub-directory. It correctly caches the route when transitioning to other routes. when I create a new prompt I call revalidatePath("/prompts/list");. The issue is when transitioning back to the /prompts/list route it doesn't show the loading.tsx skeleton or the stale /prompts/list and just hangs until the page is fetched and then shows it. How can I fix this?