Perf: Fase 3 PWA Caché optimizado y Scroll Infinito progresivo en Vistas

frontend/src/views/DiscoverView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { businessService } from '@/services/businessService'
 import type { Business } from '@/types'
 import { useRouter } from 'vue-router'
@@ -18,6 +18,11 @@ const searchQuery = ref('')
 const selectedCategory = ref('Todas')
 const selectedArea     = ref('Todas')
 
+// Infinite Scroll
+const displayLimit = ref(12)
+const observerTarget = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
 // ── Categorías con emoji e ícono material
 const CATEGORY_META: Record<string, { emoji: string; icon: string; key: string }> = {
   'Todas':       { emoji: '✨', icon: 'apps', key: 'discover.categories.all' },
@@ -63,20 +68,39 @@ onMounted(() => {
   analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'Discover' })
   loadBusinesses()
   window.addEventListener('app-refocus', handleRefocus)
+
+  // Infinite Scroll Observer
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0]?.isIntersecting) {
+      displayLimit.value += 12
+    }
+  }, { rootMargin: '400px' })
+
+  if (observerTarget.value && observer) {
+    observer.observe(observerTarget.value)
+  }
 })
 
 onUnmounted(() => {
   window.removeEventListener('app-refocus', handleRefocus)
+  if (observer) {
+    observer.disconnect()
+  }
+})
+
+// Reset display limit when filters change
+watch([selectedCategory, selectedArea, searchQuery], () => {
+  displayLimit.value = 12
 })
 
 // ── Computados
 const categories = computed<string[]>(() => {
-  const cats = new Set(businesses.value.map(b => b.category).filter(Boolean) as string[])
+  const cats = new Set(businesses.value.map(b => b.category || '').filter(Boolean))
   return ['Todas', ...Array.from(cats)]
 })
 
 const areas = computed<string[]>(() => {
-  const ars = new Set(businesses.value.map(b => b.area).filter(Boolean) as string[])
+  const ars = new Set(businesses.value.map(b => b.area || '').filter(Boolean))
   const sorted = Array.from(ars).sort()
   return ['Todas', ...sorted]
 })
@@ -102,8 +126,8 @@ const featuredBusinesses = computed(() =>
 
 const gridBusinesses = computed(() => {
   const hasFilter = selectedCategory.value !== 'Todas' || selectedArea.value !== 'Todas' || searchQuery.value.trim()
-  if (hasFilter) return filteredBusinesses.value
-  return businesses.value.slice(2)
+  if (hasFilter) return filteredBusinesses.value.slice(0, displayLimit.value)
+  return businesses.value.slice(2, Math.max(2, displayLimit.value + 2))
 })
 
 const isFiltering = computed(() =>
@@ -212,16 +236,21 @@ function resetFilters() {
             :title="t('discover.auth.title')"
             :message="t('discover.auth.message')"
           >
-            <TransitionGroup v-if="filteredBusinesses.length > 0" name="fade" tag="div" class="activity-grid">
-              <div v-for="biz in filteredBusinesses" :key="biz.id" class="activity-card" @click="handleExplore(biz)">
-                <div class="card-img-wrap">
-                  <AppImage :src="biz.image_url" type="business" :alt="biz.name" imgClass="card-img" />
+            <div v-if="filteredBusinesses.length > 0">
+              <TransitionGroup name="fade" tag="div" class="activity-grid">
+                <div v-for="biz in gridBusinesses" :key="biz.id" class="activity-card" @click="handleExplore(biz)">
+                  <div class="card-img-wrap">
+                    <AppImage :src="biz.image_url" type="business" :alt="biz.name" imgClass="card-img" />
+                  </div>
+                  <div class="card-info">
+                    <p class="card-title">{{ biz.name }}</p>
+                  </div>
                 </div>
-                <div class="card-info">
-                  <p class="card-title">{{ biz.name }}</p>
-                </div>
-              </div>
-            </TransitionGroup>
+              </TransitionGroup>
+
+              <!-- Infinite Scroll Trigger -->
+              <div ref="observerTarget" class="h-10 w-full mt-4"></div>
+            </div>
 
             <div v-else class="empty-state">
               <span class="material-icons empty-icon">search_off</span>
@@ -265,6 +294,9 @@ function resetFilters() {
                   </div>
                 </div>
               </TransitionGroup>
+
+              <!-- Infinite Scroll Trigger -->
+              <div ref="observerTarget" class="h-10 w-full mt-4"></div>
             </div>
 
             <div v-if="businesses.length === 0" class="empty-state">

frontend/src/views/transporte/TaxisLocales.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, computed } from 'vue'
+import { onMounted, onUnmounted, ref, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTaxiStore } from '@/stores/taxi'
 import { analyticsService } from '@/services/analyticsService'
@@ -19,6 +19,11 @@ const onlyEnglish = ref(false)
 const corregimientos = ['all', 'Boquete', 'David - Boquete', 'Boquete - David', 'Aeropuerto - Boquete']
 const shifts = ['all', 'dia', 'tarde', 'noche']
 
+// Infinite Scroll
+const displayLimit = ref(12)
+const observerTarget = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
+
 function fetchData() {
   taxiStore.loadTaxis()
 }
@@ -31,6 +36,18 @@ function handleRefocus() {
 onMounted(async () => {
     analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
     window.addEventListener('app-refocus', handleRefocus)
+
+    // Infinite Scroll Observer
+    observer = new IntersectionObserver((entries) => {
+      if (entries[0]?.isIntersecting) {
+        displayLimit.value += 12
+      }
+    }, { rootMargin: '400px' })
+
+    if (observerTarget.value && observer) {
+      observer.observe(observerTarget.value)
+    }
+
     if(taxiStore.taxis.length === 0) {
         await fetchData()
     }
@@ -38,6 +55,13 @@ onMounted(async () => {
 
 onUnmounted(() => {
     window.removeEventListener('app-refocus', handleRefocus)
+    if (observer) {
+      observer.disconnect()
+    }
+})
+
+watch([selectedZone, selectedShift, onlyEnglish], () => {
+  displayLimit.value = 12
 })
 
 const filteredTaxis = computed(() => {
@@ -50,6 +74,10 @@ const filteredTaxis = computed(() => {
   })
 })
 
+const visibleTaxis = computed(() => {
+  return filteredTaxis.value.slice(0, displayLimit.value)
+})
+
 const isOnline = (taxi: Taxi) => {
   if (!taxi.shifts) return false
   return taxi.shifts.includes('dia') || taxi.shifts.includes('tarde')
@@ -139,7 +167,7 @@ function getShiftLabel(shift: string) {
         :message="t('shuttle.auth.message')"
       >
         <div class="taxis-grid">
-          <div v-for="taxi in filteredTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
+          <div v-for="taxi in visibleTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
           <div class="card-top">
             <div class="driver-avatar-wrap">
               <div class="driver-avatar">
@@ -201,6 +229,9 @@ function getShiftLabel(shift: string) {
           </div>
         </div>
 
+        <!-- Infinite Scroll Trigger -->
+        <div ref="observerTarget" class="h-10 w-full mt-4"></div>
+
         <div v-if="filteredTaxis.length === 0" class="empty-state">
           <span class="material-icons">no_accounts</span>
           <p>{{ t('taxi.noTaxisAvailable') }}</p>

frontend/vite.config.ts

@@ -85,7 +85,10 @@ export default defineConfig(() => {
               handler: 'CacheFirst',
               options: {
                 cacheName: 'supabase-images-cache',
-                expiration: { maxEntries: 100, maxAgeSeconds: 2592000 }
+                expiration: { maxEntries: 200, maxAgeSeconds: 2592000 },
+                cacheableResponse: {
+                  statuses: [0, 200]
+                }
               }
             },
             {