all changes

src/components/Loader.tsx

@@ -0,0 +1,29 @@
+'use client';
+const SQUARES = [0, 1, 2, 3];
+const DELAYS  = [0, 0.15, 0.15, 0.3];
+
+export default function Loader({ className = "" }: { className?: string }) {
+  return (
+    <div className={`flex flex-col items-center justify-center gap-3 ${className}`}>
+      <div className="grid grid-cols-2 gap-1">
+        {SQUARES.map((i) => (
+          <div
+            key={i}
+            className="h-3 w-3 rounded-sm bg-blue-500"
+            style={{
+              animation: `loaderPulse 1.2s ease-in-out ${DELAYS[i]}s infinite`,
+              opacity: 0.2,
+            }}
+          />
+        ))}
+      </div>
+      <span className="text-xs font-medium text-slate-400 tracking-wide">Cargando...</span>
+      <style>{`
+        @keyframes loaderPulse {
+          0%, 100% { opacity: 0.15; transform: scale(0.85); }
+          50%       { opacity: 1;    transform: scale(1);    }
+        }
+      `}</style>
+    </div>
+  );
+}