From 081313a14002ab699c786296535e986bc109ecc8 Mon Sep 17 00:00:00 2001
From: Pablo de la Torre Jamardo <pablodelatorree@gmail.com>
Date: Sat, 19 Jul 2025 21:17:50 +0200
Subject: [PATCH] Removed classic CSS spinner in favor of reusable Spinner.vue
 component

---
 frontend/src/components/ChatMessages.vue | 21 +------
 frontend/src/components/Spinner.vue      | 80 ++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/Spinner.vue

diff --git a/frontend/src/components/ChatMessages.vue b/frontend/src/components/ChatMessages.vue
index 78684a8..7d734c0 100644
--- a/frontend/src/components/ChatMessages.vue
+++ b/frontend/src/components/ChatMessages.vue
@@ -10,14 +10,15 @@
       <em class="timestamp">{{ formatDate(msg.date) }}</em>
     </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;
diff --git a/frontend/src/components/Spinner.vue b/frontend/src/components/Spinner.vue
new file mode 100644
index 0000000..7d0768b
--- /dev/null
+++ b/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>
\ No newline at end of file