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

154
frontend/src/components/common/LoadingBranded.vue Normal file
View File

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

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