fix: resolve blank screen on return from external links
This commit is contained in:
@ -12,7 +12,7 @@ import AuthGuard from '@/components/common/AuthGuard.vue'
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const businesses = ref<Business[]>([])
|
||||
const isLoading = ref(true)
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('Todas')
|
||||
@ -41,21 +41,28 @@ function catIcon(cat: string) {
|
||||
return CATEGORY_META[cat]?.icon ?? 'place'
|
||||
}
|
||||
|
||||
async function loadBusinesses() {
|
||||
isLoading.value = true
|
||||
async function loadBusinesses(silent = false) {
|
||||
// Modo 'silencioso': si ya tenemos datos, no mostrar spinner — solo refrescar en fondo
|
||||
if (!silent || businesses.value.length === 0) {
|
||||
isLoading.value = true
|
||||
}
|
||||
error.value = null
|
||||
try {
|
||||
businesses.value = await businessService.getAllBusinesses()
|
||||
} catch (e) {
|
||||
console.error('Error loading businesses:', e)
|
||||
error.value = t('discover.error')
|
||||
// Solo mostrar error si no hay datos previos
|
||||
if (businesses.value.length === 0) {
|
||||
error.value = t('discover.error')
|
||||
}
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleRefocus() {
|
||||
loadBusinesses()
|
||||
// Recarga silenciosa: no congela la UI si ya hay datos visibles
|
||||
loadBusinesses(true)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
@ -179,7 +186,7 @@ function resetFilters() {
|
||||
<div v-else-if="error" class="state-center">
|
||||
<span class="material-icons" style="font-size: 3.5rem; color: #ef4444; opacity: 0.8; margin-bottom: 0.5rem;">error_outline</span>
|
||||
<p style="font-weight: 600; color: var(--text-secondary);">{{ error }}</p>
|
||||
<button class="cta-btn" style="margin-top: 1rem;" @click="loadBusinesses">
|
||||
<button class="cta-btn" style="margin-top: 1rem;" @click="loadBusinesses()">
|
||||
<span class="material-icons">refresh</span>
|
||||
{{ t('common.retry') }}
|
||||
</button>
|
||||
|
||||
@ -143,10 +143,28 @@ async function fetchData() {
|
||||
updateActiveUnits();
|
||||
}
|
||||
|
||||
function handleRefocus() {
|
||||
async function handleRefocus() {
|
||||
// Refrescar datos en fondo
|
||||
fetchData();
|
||||
|
||||
await nextTick();
|
||||
|
||||
if (map.value) {
|
||||
google.maps.event.trigger(map.value, 'resize');
|
||||
// El mapa sigue vivo — solo redimensionar y actualizar
|
||||
try {
|
||||
google.maps.event.trigger(map.value, 'resize');
|
||||
} catch (_) { /* ignorar si google no disponible */ }
|
||||
updateActiveUnits();
|
||||
} else {
|
||||
// El mapa fue destruido por el browser al suspender la pestaña — reinicializar
|
||||
console.log('SIBU | Mapa perdido tras refocus, reinicializando...');
|
||||
if (isLoaded.value) {
|
||||
await initializeMap();
|
||||
} else {
|
||||
const unwatch = watch(isLoaded, async (loaded) => {
|
||||
if (loaded) { await initializeMap(); unwatch(); }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,7 +172,7 @@ function handleRefocus() {
|
||||
onMounted(async () => {
|
||||
analyticsService.logEvent({ event_name: 'screen_view', properties: { screen_name: 'Map' } })
|
||||
window.addEventListener('app-refocus', handleRefocus);
|
||||
|
||||
|
||||
await fetchData();
|
||||
|
||||
const queryRouteId = router.currentRoute.value.query.routeId as string;
|
||||
@ -179,7 +197,6 @@ onMounted(async () => {
|
||||
unitFetchInterval.value = setInterval(updateActiveUnits, 15000);
|
||||
startCarousel();
|
||||
|
||||
// 🛰️ RESIZE FIX: Trigger map resize when app becomes visible again
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
});
|
||||
|
||||
@ -192,8 +209,9 @@ onUnmounted(() => {
|
||||
|
||||
function handleVisibilityChange() {
|
||||
if (document.visibilityState === 'visible' && map.value) {
|
||||
console.log('SIBU | App visible, redimensionando mapa...');
|
||||
google.maps.event.trigger(map.value, 'resize');
|
||||
try {
|
||||
google.maps.event.trigger(map.value, 'resize');
|
||||
} catch (_) { /* ignorar */ }
|
||||
updateActiveUnits();
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,8 @@ function fetchData() {
|
||||
}
|
||||
|
||||
function handleRefocus() {
|
||||
fetchData()
|
||||
// Recarga silenciosa: no congela la UI si ya hay datos
|
||||
taxiStore.silentReload()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
@ -34,7 +34,8 @@ function fetchData() {
|
||||
}
|
||||
|
||||
function handleRefocus() {
|
||||
fetchData()
|
||||
// Recarga silenciosa: no congela la UI si ya hay datos
|
||||
shuttleStore.silentReload()
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
|
||||
Reference in New Issue
Block a user