loading.tsx: root-level route loading file shows full-page spinner for all navigations including fast transitions

[nonsobethel0-dev]

Summary

src/app/loading.tsx renders <FullPageSpinner /> at the root segment level:

import { FullPageSpinner } from '@/components/LoadingSpinner';

export default function Loading() {
  return <FullPageSpinner />;
}

In Next.js App Router, a loading.tsx at the root wraps every page segment transition in a Suspense boundary. This means navigating from / to /policies — a transition that often completes in under 100 ms on a warm cache — flashes a full-screen spinner that replaces the entire page content.

The result is a jarring, disorienting experience for fast navigations and makes the app feel slower than it is. Sub-100 ms transitions should either show nothing or use a thin top-of-page progress bar (e.g. NProgress or the built-in Next.js useRouter event hooks).

Fix direction

• Remove or scope the root loading.tsx so it only applies to genuinely slow data-fetching routes (e.g. move it to src/app/pools/loading.tsx)
• For cross-page navigation feedback, add a lightweight top progress bar using a route-change event approach
• Keep per-route skeleton loading as-is in individual page components

Acceptance criteria

• Fast client-side navigations (< 300 ms) do not show a full-page overlay
• Slow routes (e.g. those that fetch before render) still have appropriate loading UI
• Root-level loading.tsx either removed or replaced with a progress bar that does not blank the screen