Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: replace obsolete spinners with branded UI loading component

Browse Source
This commit is contained in:
Johan Samudio
2026-03-04 11:17:16 -05:00
parent b45f53417a
commit 84e98b6213
10 changed files with 179 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/views/AdminReports.vue
View File

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

4
frontend/src/views/BusinessDetailsView.vue
View File

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

4
frontend/src/views/DiscoverView.vue
View File

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

4
frontend/src/views/FavoritesView.vue
View File

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

8
frontend/src/views/RoutesView.vue
View File

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

4
frontend/src/views/SchedulesView.vue
View File

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

6
frontend/src/views/transporte/ShuttleDetalle.vue
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 -->

4
frontend/src/views/transporte/TaxisLocales.vue
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">

8
frontend/src/views/transporte/ViajesTuristicos.vue
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">