InstantSearch reduce requests and bounces

resources/js/instantsearch-components.js

@@ -0,0 +1,17 @@
+export { default as InstantSearch } from 'vue-instantsearch/vue3/es/src/components/InstantSearch'
+export { default as Hits } from 'vue-instantsearch/vue3/es/src/components/Hits.js'
+export { default as InfiniteHits } from 'vue-instantsearch/vue3/es/src/components/InfiniteHits.vue.js'
+export { default as Configure } from 'vue-instantsearch/vue3/es/src/components/Configure.js'
+export { default as Autocomplete } from 'vue-instantsearch/vue3/es/src/components/Autocomplete.vue.js'
+export { default as SearchBox } from 'vue-instantsearch/vue3/es/src/components/SearchBox.vue.js'
+export { default as StateResults } from 'vue-instantsearch/vue3/es/src/components/StateResults.vue.js'
+export { default as Index } from 'vue-instantsearch/vue3/es/src/components/Index.js'
+export { default as RefinementList } from 'vue-instantsearch/vue3/es/src/components/RefinementList.vue.js'
+export { default as HierarchicalMenu } from 'vue-instantsearch/vue3/es/src/components/HierarchicalMenu.vue.js'
+export { default as RangeInput } from 'vue-instantsearch/vue3/es/src/components/RangeInput.vue.js'
+export { default as CurrentRefinements } from 'vue-instantsearch/vue3/es/src/components/CurrentRefinements.vue.js'
+export { default as ClearRefinements } from 'vue-instantsearch/vue3/es/src/components/ClearRefinements.vue.js'
+export { default as HitsPerPage } from 'vue-instantsearch/vue3/es/src/components/HitsPerPage.vue.js'
+export { default as SortBy } from 'vue-instantsearch/vue3/es/src/components/SortBy.vue.js'
+export { default as Pagination } from 'vue-instantsearch/vue3/es/src/components/Pagination.vue.js'
+export { default as Stats } from 'vue-instantsearch/vue3/es/src/components/Stats.vue.js'

resources/js/instantsearch.js

@@ -1,81 +1,36 @@
 import { defineAsyncComponent } from 'vue'
 import { addQuery } from './stores/useSearchHistory'
 
+const instantsearchComponents = import('./instantsearch-components')
+const component = (name) => defineAsyncComponent(() => instantsearchComponents.then((m) => m[name]))
+
 document.addEventListener('vue:loaded', function (event) {
     const vue = event.detail.vue
+
     // Shared between Autocomplete and Listing
-    vue.component(
-        'ais-instant-search',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/InstantSearch')),
-    )
-    vue.component(
-        'ais-hits',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/Hits.js')),
-    )
-    vue.component(
-        'ais-infinite-hits',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/InfiniteHits.vue.js')),
-    )
-    vue.component(
-        'ais-configure',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/Configure.js')),
-    )
-    vue.component(
-        'ais-autocomplete',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/Autocomplete.vue.js')),
-    )
-    vue.component(
-        'ais-search-box',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/SearchBox.vue.js')),
-    )
-    vue.component(
-        'ais-state-results',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/StateResults.vue.js')),
-    )
+    vue.component('ais-instant-search', component('InstantSearch'))
+    vue.component('ais-hits', component('Hits'))
+    vue.component('ais-infinite-hits', component('InfiniteHits'))
+    vue.component('ais-configure', component('Configure'))
+    vue.component('ais-autocomplete', component('Autocomplete'))
+    vue.component('ais-search-box', component('SearchBox'))
+    vue.component('ais-state-results', component('StateResults'))
 
     // Used by Autocomplete
-    vue.component(
-        'ais-index',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/Index.js')),
-    )
+    vue.component('ais-index', component('Index'))
 
-    // Used by Listing
-    vue.component(
-        'ais-refinement-list',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/RefinementList.vue.js')),
-    )
-    vue.component(
-        'ais-hierarchical-menu',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/HierarchicalMenu.vue.js')),
-    )
-    vue.component(
-        'ais-range-input',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/RangeInput.vue.js')),
-    )
-    vue.component(
-        'ais-current-refinements',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/CurrentRefinements.vue.js')),
-    )
-    vue.component(
-        'ais-clear-refinements',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/ClearRefinements.vue.js')),
-    )
-    vue.component(
-        'ais-hits-per-page',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/HitsPerPage.vue.js')),
-    )
-    vue.component(
-        'ais-sort-by',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/SortBy.vue.js')),
-    )
-    vue.component(
-        'ais-pagination',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/Pagination.vue.js')),
-    )
-    vue.component(
-        'ais-stats',
-        defineAsyncComponent(() => import('vue-instantsearch/vue3/es/src/components/Stats.vue.js')),
-    )
+    // // Used by Listing
+    vue.component('ais-refinement-list', component('RefinementList'))
+    vue.component('ais-hierarchical-menu', component('HierarchicalMenu'))
+    vue.component('ais-range-input', component('RangeInput'))
+    vue.component('ais-current-refinements', component('CurrentRefinements'))
+    vue.component('ais-clear-refinements', component('ClearRefinements'))
+    vue.component('ais-hits-per-page', component('HitsPerPage'))
+    vue.component('ais-sort-by', component('SortBy'))
+    vue.component('ais-pagination', component('Pagination'))
+    vue.component('ais-stats', component('Stats'))
+
+    // Custom component
     vue.component(
         'ais-stats-analytics',
         defineAsyncComponent(() => import('./components/Search/AisStatsAnalytics.vue')),

resources/js/stores/useUser.js

@@ -43,7 +43,18 @@ let currentRefresh = null
 
 export const refresh = async function () {
     if (!token.value) {
-        userStorage.value = {}
+        let loggedOutValue = {
+            is_logged_in: false,
+        }
+
+        // We're doing this as the userStorage is reactive and
+        // used in the Listing.vue for the user groupId. So
+        // if the userStorage changes; the listing will
+        // update, we don't want unneeded refreshes.
+        if (JSON.stringify(userStorage.value) !== JSON.stringify(loggedOutValue)) {
+            userStorage.value = loggedOutValue
+        }
+
         return false
     }
 

resources/views/listing/filters.blade.php

@@ -12,9 +12,10 @@
 @endPushOnce
 <x-rapidez::slideover.mobile id="category-filters-slideover" :title="__('Filters')">
     <div class="max-lg:container max-lg:pt-6">
-        @include('rapidez::listing.partials.filter.selected')
-        @include('rapidez::listing.partials.filter.search')
-        @include('rapidez::listing.partials.filter.category')
+        {{-- TODO: Check these, they result in multple queries --}}
+        {{-- @include('rapidez::listing.partials.filter.selected') --}}
+        {{-- @include('rapidez::listing.partials.filter.search') --}}
+        {{-- @include('rapidez::listing.partials.filter.category') --}}
 
         <template v-for="filter in config.filterable_attributes">
             @include('rapidez::listing.partials.filter.price')

resources/views/listing/partials/filter/price.blade.php

@@ -13,8 +13,8 @@ class="relative -mx-1 -mt-1"
                                 v-bind:range="range"
                                 v-bind:current="currentRefinement"
                                 v-on:change="refine"
-                                v-bind:prefix="filter.code === 'price' && $root.currencySymbolLocation.value === 'left' ? $root.currencySymbol : ''"
-                                v-bind:suffix="filter.code === 'price' && $root.currencySymbolLocation.value === 'right' ? $root.currencySymbol : ''"
+                                v-bind:prefix="filter.code === 'price' && $root.currencySymbolLocation.value === 'left' ? $root.currencySymbol.value : ''"
+                                v-bind:suffix="filter.code === 'price' && $root.currencySymbolLocation.value === 'right' ? $root.currencySymbol.value : ''"
                             >
                                 <x-slot:value>
                                     @{{ price(value, { maximumFractionDigits: 0 }) }}

resources/views/listing/partials/toolbar.blade.php

@@ -1,5 +1,6 @@
 <div class="flex gap-1 sm:items-center text-sm">
     <div class="flex-1">
+        {{-- TODO: Check this one as it's not visible atm --}}
         @include('rapidez::listing.partials.toolbar.stats')
     </div>
     @include('rapidez::listing.partials.toolbar.pages')

resources/views/listing/products.blade.php

@@ -15,7 +15,7 @@
     <div class="pb-4 border-b">
         @include('rapidez::listing.partials.toolbar')
     </div>
-    <ais-hits v-if="listingSlotProps.requestCount > 0" :transform-items="listingSlotProps.transformItems">
+    <ais-hits v-show="listingSlotProps.requestCount > 0" :transform-items="listingSlotProps.transformItems">
         <template v-slot="{ items, sendEvent }">
             <div v-if="items && items.length" class="overflow-hidden">
                 <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 -mx-5 -mb-px *:border-b">