Removed classic CSS spinner in favor of reusable Spinner.vue component

frontend/src/components/ChatMessages.vue

@@ -11,13 +11,14 @@
     </div>
   </div>
 
-  <div v-if="isLoading" class="spinner"></div>
+  <Spinner v-if="isLoading" :overlay="false" />
   <div v-if="isLoading" class="thinking-text">Pensando...</div>
 </template>
 
 <script setup>
 import { ref, watch, nextTick } from 'vue'
 import { dateUtils } from '../utils/dateUtils.ts'
+import Spinner from './Spinner.vue'
 
 const props = defineProps({
   messages: {
@@ -116,22 +117,6 @@ const formatDate = (date) => {
   user-select: none;
 }
 
-.spinner {
-  margin: 1rem auto;
-  width: 36px;
-  height: 36px;
-  border: 4px solid rgba(90, 144, 255, 0.2);
-  border-top-color: #5a90ff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
 .thinking-text {
   text-align: center;
   color: #5a90ff;

frontend/src/components/Spinner.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="spinner-container" :class="{ overlay }">
+    <svg
+        class="spinner"
+        width="50"
+        height="50"
+        viewBox="0 0 50 50"
+        aria-label="Cargando"
+        role="img"
+    >
+      <circle
+          class="spinner-path"
+          cx="25"
+          cy="25"
+          r="20"
+          fill="none"
+          stroke-width="5"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  overlay: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<style scoped>
+.spinner-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem;
+}
+
+.spinner-container.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(255, 255, 255, 0.6);
+  z-index: 9999;
+}
+
+.spinner {
+  animation: rotate 2s linear infinite;
+}
+
+.spinner-path {
+  stroke: #5a90ff;
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+</style>