fix: fix warmup (fix bug with cards loads after first catalog visit)

Author: sosukii

app/components/AppFooter.vue

@@ -1,3 +1,9 @@
+<script setup lang="ts">
+import { useCatalogNavigationWarmup } from '~/composables/useCatalogNavigationWarmup'
+
+const { warmCatalogListing } = useCatalogNavigationWarmup()
+</script>
+
 <template>
   <footer class="bg-surface-container-lowest py-12 lg:py-20 border-t border-white/5">
     <div class="container mx-auto px-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8">
@@ -13,7 +19,16 @@
       <div class="flex flex-col gap-6">
         <h3 class="text-lg font-heading font-semibold text-white/90">Навигация</h3>
         <nav class="flex flex-col gap-3">
-          <NuxtLink to="/products" prefetch-on="interaction" class="text-sm text-white/60 hover:text-secondary transition-colors">Каталог</NuxtLink>
+          <NuxtLink
+            to="/products"
+            prefetch-on="interaction"
+            class="text-sm text-white/60 hover:text-secondary transition-colors"
+            @pointerenter="warmCatalogListing"
+            @focus="warmCatalogListing"
+            @mousedown="warmCatalogListing"
+          >
+            Каталог
+          </NuxtLink>
           <NuxtLink to="/services" prefetch-on="interaction" class="text-sm text-white/60 hover:text-secondary transition-colors">Услуги</NuxtLink>
           <NuxtLink to="/brands" prefetch-on="interaction" class="text-sm text-white/60 hover:text-secondary transition-colors">Бренды</NuxtLink>
           <NuxtLink to="/delivery" prefetch-on="interaction" class="text-sm text-white/60 hover:text-secondary transition-colors">Доставка</NuxtLink>

app/components/AppHeader.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import AppButton from './ui/AppButton.vue'
+import { useCatalogNavigationWarmup } from '~/composables/useCatalogNavigationWarmup'
 
 const isMenuOpen = ref(false)
 const toggleMenu = () => isMenuOpen.value = !isMenuOpen.value
+const { warmCatalogListing } = useCatalogNavigationWarmup()
 
 const navLinks = [
   { name: 'Каталог', to: '/products' },
@@ -27,6 +29,9 @@ const navLinks = [
           :to="link.to"
           prefetch-on="interaction"
           class="text-sm font-medium text-white/70 hover:text-white transition-colors focus:outline-none focus:text-white"
+          @pointerenter="link.to === '/products' ? warmCatalogListing() : undefined"
+          @focus="link.to === '/products' ? warmCatalogListing() : undefined"
+          @mousedown="link.to === '/products' ? warmCatalogListing() : undefined"
         >
           {{ link.name }}
         </NuxtLink>
@@ -61,6 +66,9 @@ const navLinks = [
             :to="link.to"
             prefetch-on="interaction"
             class="text-lg font-medium text-white/70 py-2 border-b border-white/5"
+            @pointerenter="link.to === '/products' ? warmCatalogListing() : undefined"
+            @focus="link.to === '/products' ? warmCatalogListing() : undefined"
+            @mousedown="link.to === '/products' ? warmCatalogListing() : undefined"
             @click="isMenuOpen = false"
           >
             {{ link.name }}

app/components/ui/AppButton.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useCatalogNavigationWarmup } from '~/composables/useCatalogNavigationWarmup'
 
 interface Props {
   variant?: 'primary' | 'glass' | 'text'
@@ -17,6 +18,9 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   ariaLabel: undefined
 })
+const { warmCatalogListing } = useCatalogNavigationWarmup()
+
+const shouldWarmCatalogListing = computed(() => props.to === '/products' || props.to?.startsWith('/products?'))
 const classes = computed(() => [
   'inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-secondary/50 disabled:opacity-50 disabled:cursor-not-allowed',
   {
@@ -34,6 +38,9 @@ const classes = computed(() => [
     :class="classes"
     :aria-label="ariaLabel"
     prefetch-on="interaction"
+    @pointerenter="shouldWarmCatalogListing ? warmCatalogListing() : undefined"
+    @focus="shouldWarmCatalogListing ? warmCatalogListing() : undefined"
+    @mousedown="shouldWarmCatalogListing ? warmCatalogListing() : undefined"
   >
     <span v-if="loading" class="mr-2 animate-spin"/>
     <slot />

app/composables/useCatalogNavigationWarmup.ts

@@ -0,0 +1,25 @@
+import { useCatalog } from '~/composables/useCatalog'
+
+export const useCatalogNavigationWarmup = () => {
+  const { getCachedProductsPageByFilters, prefetchCatalogPage } = useCatalog()
+  const warmupStarted = useState('catalog-navigation-warmup-started', () => false)
+
+  const warmCatalogListing = () => {
+    if (import.meta.server || warmupStarted.value || getCachedProductsPageByFilters(1, '', '', [])) {
+      return
+    }
+
+    warmupStarted.value = true
+
+    void prefetchCatalogPage(1, '', '', [], {
+      imageCount: 8,
+      imagePriority: 'high'
+    }).finally(() => {
+      warmupStarted.value = false
+    })
+  }
+
+  return {
+    warmCatalogListing
+  }
+}

app/pages/products/index.vue

@@ -53,6 +53,7 @@ const firstRenderSettled = ref(false)
 const lastResolvedData = ref(defaultProductsResponse())
 const isRouteFetching = ref(false)
 const filtersHydrated = ref(false)
+const routeFetchReady = ref(false)
 
 let searchDebounceTimeout: ReturnType<typeof setTimeout> | null = null
 
@@ -182,7 +183,6 @@ const criticalImageLinks = computed(() => products.value
     as: 'image',
     href,
     fetchpriority: 'high',
-    // crossorigin: ''
   })))
 
 useHead(() => ({
@@ -195,7 +195,6 @@ const categories = computed(() =>
       slug: category.slug,
       label: getCategoryLabel(category.slug)
     }))
-    .sort((left, right) => left.label.localeCompare(right.label))
 )
 
 const allVisibleImagesReady = computed(() => {
@@ -388,14 +387,13 @@ const handlePageChange = (page: number) => {
 
 watch(
   () => route.fullPath,
-  () => {
-    if (import.meta.server) {
+  (nextPath, previousPath) => {
+    if (import.meta.server || !routeFetchReady.value || nextPath === previousPath) {
       return
     }
 
     void fetchRoutePage()
-  },
-  { immediate: true }
+  }
 )
 
 watch(
@@ -456,12 +454,18 @@ watch(error, (currentError) => {
 })
 
 onMounted(() => {
+  routeFetchReady.value = true
+
   requestAnimationFrame(() => {
     firstRenderSettled.value = true
   })
 
   if (!products.value.length) {
-    void recoverCatalogDataOnClient()
+    void fetchRoutePage().finally(() => {
+      if (!products.value.length) {
+        void recoverCatalogDataOnClient()
+      }
+    })
   }
 })