feat: replace obsolete spinners with branded UI loading component

This commit is contained in:
2026-03-04 11:17:16 -05:00
parent b45f53417a
commit 84e98b6213
10 changed files with 179 additions and 21 deletions

View File

@ -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 -->

View File

@ -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">

View File

@ -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">