phase-5: code maintenance

ui/src/routes/+layout.svelte

@@ -1,13 +1,17 @@
 <script>
   import { page, navigating } from '$app/stores';
   import '../styles/app.scss';
+  import Spinner from '$lib/Spinner.svelte';
   let { children } = $props();
 
-  // Label shown under the nav progress bar while loading a page
+  // Resolve active path optimistically — use the destination during navigation
+  // so the nav link highlights immediately on click, not after load completes.
+  const activePath = $derived($navigating?.to?.url?.pathname ?? $page.url.pathname);
+
   const navLabel = $derived(
-    $navigating?.to?.url?.pathname === '/portfolio'         ? 'Loading portfolio…' :
-    $navigating?.to?.url?.pathname?.startsWith('/calls')    ? 'Loading market calls…' :
-    $navigating?.to?.url?.pathname === '/safe-buys'         ? 'Screening safe buys…' :
+    activePath === '/portfolio'         ? 'Loading portfolio…' :
+    activePath?.startsWith('/calls')    ? 'Loading market calls…' :
+    activePath === '/safe-buys'         ? 'Screening safe buys…' :
     'Loading…'
   );
 </script>
@@ -16,10 +20,10 @@
   <nav>
     <span class="brand">📊 Market Screener</span>
     <div class="links">
-      <a href="/" class:active={$page.url.pathname === '/'}>Screener</a>
-      <a href="/portfolio" class:active={$page.url.pathname === '/portfolio'}>Portfolio</a>
-      <a href="/calls" class:active={$page.url.pathname.startsWith('/calls')}>Market Calls</a>
-      <a href="/safe-buys" class:active={$page.url.pathname === '/safe-buys'}>🛡 Safe Buys</a>
+      <a href="/" class:active={activePath === '/'}>Screener</a>
+      <a href="/portfolio" class:active={activePath === '/portfolio'}>Portfolio</a>
+      <a href="/calls" class:active={activePath?.startsWith('/calls')}>Market Calls</a>
+      <a href="/safe-buys" class:active={activePath === '/safe-buys'}>🛡 Safe Buys</a>
     </div>
   </nav>
 
@@ -34,8 +38,7 @@
     {#if $navigating}
       <!-- Replace old page content immediately — old page disappears, spinner takes over -->
       <div class="nav-overlay">
-        <div class="nav-spinner"></div>
-        <span class="nav-label">{navLabel}</span>
+        <Spinner size="lg" label={navLabel} />
       </div>
     {:else}
       {@render children()}