site

+<script>
+  let { size = 40, color = 'currentColor' } = $props();
+</script>
+
+<svg
+  fill={color}
+  viewBox="0 -10 40 28"
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size * 0.7}
+  class="spinner"
+>
+  <circle cx="8" cy="12" r="3" class="first"/>
+  <circle cx="16" cy="12" r="3"/>
+  <circle cx="24" cy="12" r="3"/>
+  <circle cx="32" cy="12" r="3" class="second"/>
+</svg>
+
+<style>
+  @keyframes swing {
+    0% {
+      transform: rotate(0deg);
+      animation-timing-function: ease-out;
+    }
+    25% {
+      transform: rotate(50deg);
+      animation-timing-function: ease-in;
+    }
+    50% {
+      transform: rotate(0deg);
+      animation-timing-function: linear;
+    }
+  }
+
+  @keyframes swing2 {
+    0% {
+      transform: rotate(0deg);
+      animation-timing-function: linear;
+    }
+    50% {
+      transform: rotate(0deg);
+      animation-timing-function: ease-out;
+    }
+    75% {
+      transform: rotate(-50deg);
+      animation-timing-function: ease-in;
+    }
+  }
+
+  .spinner .first {
+    animation: swing 1.2s linear infinite;
+    transform-origin: center top;
+  }
+
+  .spinner .second {
+    animation: swing2 1.2s linear infinite;
+    transform-origin: center top;
+  }
+</style>

+/**
+ * Cache store for clasificador data
+ * Persists data in memory to avoid reloading on navigation
+ */
+import { writable } from 'svelte/store';
+
+// Cache structure
+const createClasificadorCache = () => {
+  const { subscribe, set, update } = writable({
+    objetoGasto: {
+      allItems: null,
+      grupos: null,
+      entities: null,
+      availableYears: null,
+      lastFetched: null
+    }
+  });
+
+  return {
+    subscribe,
+
+    // Set all clasificador objeto data
+    setObjetoGasto: (data) => {
+      update(cache => ({
+        ...cache,
+        objetoGasto: {
+          ...data,
+          lastFetched: Date.now()
+        }
+      }));
+    },
+
+    // Get cached data if valid (less than 5 minutes old)
+    getObjetoGasto: (currentCache) => {
+      const cache = currentCache.objetoGasto;
+      if (!cache.lastFetched) return null;
+
+      // Cache valid for 5 minutes
+      const isValid = Date.now() - cache.lastFetched < 5 * 60 * 1000;
+      if (!isValid) return null;
+
+      return cache;
+    },
+
+    // Clear cache
+    clear: () => {
+      set({
+        objetoGasto: {
+          allItems: null,
+          grupos: null,
+          entities: null,
+          availableYears: null,
+          lastFetched: null
+        }
+      });
+    }
+  };
+};
+
+export const clasificadorCache = createClasificadorCache();

@@ -3,6 +3,7 @@
   import { tweened } from 'svelte/motion';
   import { tweened } from 'svelte/motion';
   import { cubicOut } from 'svelte/easing';
   import { cubicOut } from 'svelte/easing';
   import { supabase } from '$lib/supabase';
   import { supabase } from '$lib/supabase';
+  import Spinner from '$lib/components/ui/Spinner.svelte';
 
 
   // ══════════════════════════════════════════════════════════════
   // ══════════════════════════════════════════════════════════════
   // ESTADO GENERAL
   // ESTADO GENERAL
@@ -886,7 +887,7 @@
         </div>
         </div>
       {:else if loadingComparacion}
       {:else if loadingComparacion}
         <div class="comparador-placeholder">
         <div class="comparador-placeholder">
-          <p>Cargando datos...</p>
+          <Spinner size={48} color="var(--theme-texto, #5A5650)" />
         </div>
         </div>
       {:else if añosComparacion.length === 0}
       {:else if añosComparacion.length === 0}
         <div class="comparador-placeholder">
         <div class="comparador-placeholder">