Apply hexagonal architecture and clean code principles

chat-web-client/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>