From 84e98b6213cb2c35fbc5834fb8c8657917533970 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Wed, 4 Mar 2026 11:17:16 -0500
Subject: [PATCH] feat: replace obsolete spinners with branded UI loading
 component

---
 .../src/components/common/LoadingBranded.vue  | 154 ++++++++++++++++++
 frontend/src/views/AdminReports.vue           |   4 +-
 frontend/src/views/BusinessDetailsView.vue    |   4 +-
 frontend/src/views/DiscoverView.vue           |   4 +-
 frontend/src/views/FavoritesView.vue          |   4 +-
 frontend/src/views/RoutesView.vue             |   8 +-
 frontend/src/views/SchedulesView.vue          |   4 +-
 .../src/views/transporte/ShuttleDetalle.vue   |   6 +-
 .../src/views/transporte/TaxisLocales.vue     |   4 +-
 .../src/views/transporte/ViajesTuristicos.vue |   8 +-
 10 files changed, 179 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/common/LoadingBranded.vue

diff --git a/frontend/src/components/common/LoadingBranded.vue b/frontend/src/components/common/LoadingBranded.vue
new file mode 100644
index 0000000..ad86b4b
--- /dev/null
+++ b/frontend/src/components/common/LoadingBranded.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+// defineProps is a compiler macro, no import needed
+
+defineProps({
+  message: {
+    type: String,
+    default: 'Cargando...'
+  },
+  icon: {
+    type: String,
+    default: 'explore'
+  }
+})
+</script>
+
+<template>
+  <div class="loading-branded-container">
+    <div class="loading-pulse-ring">
+      <div class="loading-icon-wrap">
+        <span class="material-icons loading-icon">{{ icon }}</span>
+      </div>
+    </div>
+    <div class="loading-text-wrap">
+      <p class="loading-message">{{ message }}</p>
+      <div class="loading-dots">
+        <span>.</span><span>.</span><span>.</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading-branded-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 3rem 1rem;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.loading-pulse-ring {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-pulse-ring::before,
+.loading-pulse-ring::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background-color: var(--active-color, #fee715);
+  opacity: 0;
+  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.loading-pulse-ring::after {
+  animation-delay: 1s;
+}
+
+.loading-icon-wrap {
+  position: relative;
+  z-index: 2;
+  width: 56px;
+  height: 56px;
+  background-color: var(--bg-secondary, #ffffff);
+  border: 2px solid var(--border-color, #e2e8f0);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  animation: icon-float 3s ease-in-out infinite;
+}
+
+.loading-icon {
+  font-size: 28px;
+  color: var(--text-primary, #1e293b);
+}
+
+.loading-text-wrap {
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+}
+
+.loading-message {
+  font-size: 1rem;
+  font-weight: 800;
+  color: var(--text-primary, #1e293b);
+  letter-spacing: -0.01em;
+  margin: 0;
+}
+
+.loading-dots {
+  display: flex;
+  color: var(--text-primary, #1e293b);
+  font-weight: 800;
+  font-size: 1.2rem;
+  line-height: 1;
+}
+
+.loading-dots span {
+  animation: loading-dot 1.4s infinite;
+  opacity: 0;
+}
+
+.loading-dots span:nth-child(1) { animation-delay: 0s; }
+.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.6);
+    opacity: 0.6;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes icon-float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+}
+
+@keyframes loading-dot {
+  0% { opacity: 0; }
+  50% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* Dark mode overrides automatically adapt using CSS variables, but just in case */
+@media (prefers-color-scheme: dark) {
+  .loading-icon-wrap {
+    background-color: var(--bg-secondary, #1e293b);
+    border-color: rgba(255,255,255, 0.1);
+  }
+  .loading-icon, .loading-message, .loading-dots {
+    color: var(--text-default, #f1f5f9);
+  }
+}
+</style>
diff --git a/frontend/src/views/AdminReports.vue b/frontend/src/views/AdminReports.vue
index 785aa0b..2a0d6fd 100644
--- a/frontend/src/views/AdminReports.vue
+++ b/frontend/src/views/AdminReports.vue
@@ -8,8 +8,7 @@
     </div>
 
     <div v-if="isLoading" class="loading">
-      <div class="spinner"></div>
-      <p>Cargando reportes...</p>
+      <LoadingBranded message="Cargando reportes..." icon="assignment" />
     </div>
 
     <div v-else-if="reports.length > 0" class="reports-container">
@@ -73,6 +72,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { reportsService, type Report } from '@/services/reportsService'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const reports = ref<Report[]>([])
 const isLoading = ref(true)
diff --git a/frontend/src/views/BusinessDetailsView.vue b/frontend/src/views/BusinessDetailsView.vue
index 223536e..1107e37 100644
--- a/frontend/src/views/BusinessDetailsView.vue
+++ b/frontend/src/views/BusinessDetailsView.vue
@@ -7,6 +7,7 @@ import type { Business, Coupon } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
 import { analyticsService } from '@/services/analyticsService'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -131,8 +132,7 @@ const hasSocials = computed(() =>
 <template>
   <!-- ── LOADING ── -->
   <div v-if="isLoading" class="state-full">
-    <div class="spinner"></div>
-    <p class="state-msg">Cargando negocio...</p>
+    <LoadingBranded :message="'Cargando negocio...'" icon="storefront" />
   </div>
 
   <!-- ── ERROR ── -->
diff --git a/frontend/src/views/DiscoverView.vue b/frontend/src/views/DiscoverView.vue
index 82b268d..359e1ea 100644
--- a/frontend/src/views/DiscoverView.vue
+++ b/frontend/src/views/DiscoverView.vue
@@ -8,6 +8,7 @@ import FavoriteButton from '@/components/FavoriteButton.vue'
 import { analyticsService } from '@/services/analyticsService'
 import { getImageUrl } from '@/utils/imageUrl'
 import AuthGuard from '@/components/common/AuthGuard.vue'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -178,8 +179,7 @@ function resetFilters() {
 
     <!-- ── LOADING ── -->
     <div v-if="isLoading" class="state-center">
-      <div class="spinner"></div>
-      <p>{{ t('discover.loading') }}</p>
+      <LoadingBranded :message="t('discover.loading', 'Cargando Lugares')" icon="storefront" />
     </div>
 
     <!-- ── ERROR ── -->
diff --git a/frontend/src/views/FavoritesView.vue b/frontend/src/views/FavoritesView.vue
index 1f8ce24..5dc17eb 100644
--- a/frontend/src/views/FavoritesView.vue
+++ b/frontend/src/views/FavoritesView.vue
@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 import { useFavoritesStore } from '@/stores/favorites'
 import { useI18n } from 'vue-i18n'
 import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const router = useRouter()
 const { t } = useI18n()
@@ -93,8 +94,7 @@ const hasVisibleItems = computed(() =>
 
     <!-- ── Loading ── -->
     <div v-if="favoritesStore.isLoading" class="state-center">
-      <div class="spinner"></div>
-      <p>{{ t('common.loading') }}</p>
+      <LoadingBranded :message="t('common.loading', 'Cargando favoritos')" icon="favorite_border" />
     </div>
 
     <template v-else>
diff --git a/frontend/src/views/RoutesView.vue b/frontend/src/views/RoutesView.vue
index e85c3ac..85ecf66 100644
--- a/frontend/src/views/RoutesView.vue
+++ b/frontend/src/views/RoutesView.vue
@@ -5,6 +5,7 @@ import { useRouteStore } from '@/stores/route'
 import { useTaxiStore } from '@/stores/taxi'
 import { analyticsService } from '@/services/analyticsService'
 import FavoriteButton from '@/components/FavoriteButton.vue'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -175,8 +176,11 @@ const correlimientos = computed(() => {
       </h2>
 
       <!-- Loading Results -->
-      <div v-if="routeStore.isLoadingRoutes || taxiStore.isLoading" class="flex justify-center py-10">
-        <div class="w-10 h-10 border-4 border-primary/20 border-t-primary rounded-full animate-spin"></div>
+      <div v-if="routeStore.isLoadingRoutes || taxiStore.isLoading" class="flex justify-center py-10 w-full">
+        <LoadingBranded 
+          :message="activeTab === 'routes' ? t('routesView.loadingRoutes', 'Cargando Rutas y Paradas') : t('routesView.loadingDrivers', 'Buscando Conductores Disponibles')" 
+          :icon="activeTab === 'routes' ? 'directions_bus' : 'local_taxi'" 
+        />
       </div>
 
       <!-- Bus Routes List -->
diff --git a/frontend/src/views/SchedulesView.vue b/frontend/src/views/SchedulesView.vue
index aafd60c..7029e2e 100644
--- a/frontend/src/views/SchedulesView.vue
+++ b/frontend/src/views/SchedulesView.vue
@@ -6,6 +6,7 @@ import { formatTo12Hour } from '@/utils/timeFormatter'
 import { analyticsService } from '@/services/analyticsService'
 import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const route = useRoute()
 const { t } = useI18n()
@@ -295,8 +296,7 @@ onUnmounted(() => {
 
       <!-- Loading -->
       <div v-if="scheduleStore.isLoading" class="state-center">
-        <div class="spinner"></div>
-        <p>{{ t('schedules.loading') || 'Cargando horarios...' }}</p>
+        <LoadingBranded :message="t('schedules.loading') || 'Cargando horarios...'" icon="schedule" />
       </div>
 
       <!-- Sin resultados en el filtro -->
diff --git a/frontend/src/views/transporte/ShuttleDetalle.vue b/frontend/src/views/transporte/ShuttleDetalle.vue
index 08dd856..f27345c 100644
--- a/frontend/src/views/transporte/ShuttleDetalle.vue
+++ b/frontend/src/views/transporte/ShuttleDetalle.vue
@@ -6,6 +6,7 @@ import type { Shuttle } from '@/types'
 import { getImageUrl } from '@/utils/imageUrl'
 import { analyticsService } from '@/services/analyticsService'
 import { useI18n } from 'vue-i18n'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -75,9 +76,8 @@ const getTripTypeLabel = (type: string) => {
     </div>
 
     <!-- Loading -->
-    <div v-if="cargando" class="flex flex-col justify-center items-center h-64 gap-3">
-       <span class="material-icons spin text-4xl" style="color: var(--active-color)">refresh</span>
-       <p class="text-text-secondary font-medium animate-pulse">{{ t('common.loading') }}</p>
+    <div v-if="cargando" class="flex flex-col justify-center items-center h-64 gap-3 w-full">
+       <LoadingBranded :message="t('common.loading') || 'Cargando detalle...'" icon="airport_shuttle" />
     </div>
 
     <!-- Error -->
diff --git a/frontend/src/views/transporte/TaxisLocales.vue b/frontend/src/views/transporte/TaxisLocales.vue
index ac6e9e8..3982fa0 100644
--- a/frontend/src/views/transporte/TaxisLocales.vue
+++ b/frontend/src/views/transporte/TaxisLocales.vue
@@ -7,6 +7,7 @@ import type { Taxi } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { getImageUrl } from '@/utils/imageUrl'
 import AuthGuard from '@/components/common/AuthGuard.vue'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const { t } = useI18n()
 const taxiStore = useTaxiStore()
@@ -119,8 +120,7 @@ function getShiftLabel(shift: string) {
       </div>
       
       <div v-if="taxiStore.isLoading" class="state-container">
-        <span class="material-icons spin">refresh</span>
-        <p>{{ t('taxi.loadingTaxis') }}</p>
+        <LoadingBranded :message="t('taxi.loadingTaxis') || 'Cargando taxis...'" icon="local_taxi" />
       </div>
       
       <div v-else-if="taxiStore.error" class="state-container">
diff --git a/frontend/src/views/transporte/ViajesTuristicos.vue b/frontend/src/views/transporte/ViajesTuristicos.vue
index 81b1dba..fda9d6a 100644
--- a/frontend/src/views/transporte/ViajesTuristicos.vue
+++ b/frontend/src/views/transporte/ViajesTuristicos.vue
@@ -3,9 +3,10 @@ import { onMounted, onUnmounted, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useShuttleStore } from '@/stores/shuttle'
-import { analyticsService } from '@/services/analyticsService'
-import { getImageUrl } from '@/utils/imageUrl'
 import AuthGuard from '@/components/common/AuthGuard.vue'
+import { getImageUrl } from '@/utils/imageUrl'
+import { analyticsService } from '@/services/analyticsService'
+import LoadingBranded from '@/components/common/LoadingBranded.vue'
 
 const { t } = useI18n()
 const shuttleStore = useShuttleStore()
@@ -93,8 +94,7 @@ onUnmounted(() => {
 
     <!-- ESTADOS -->
     <div v-if="shuttleStore.isLoading" class="state-container">
-      <span class="material-icons spin">refresh</span>
-      <p>{{ t('taxi.loadingTaxis') }}</p>
+      <LoadingBranded :message="t('taxi.loadingTaxis') || 'Cargando viajes...'" icon="airport_shuttle" />
     </div>
 
     <div v-else-if="shuttleStore.error" class="state-container">