fix: resolve blank screen on return from external links

This commit is contained in:
2026-03-03 20:51:17 -05:00
parent 7ff205b12a
commit af7464be43
7 changed files with 108 additions and 18 deletions

View File

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