From 9181cf6ad7a3c9d2ccb8729a61645aae35550f58 Mon Sep 17 00:00:00 2001 From: Laura Martinez Garcia Date: Thu, 5 Feb 2026 16:44:07 +0100 Subject: [PATCH] feat: avoid unnecessary API requests --- src/App.vue | 4 +- .../full-width-predictive.vue | 44 +++++++++++++------ .../predictive-layer/predictive-layer.vue | 43 +++++++++++++----- src/components/teleport/custom-teleport.vue | 25 ++++++----- 4 files changed, 79 insertions(+), 37 deletions(-) diff --git a/src/App.vue b/src/App.vue index 079596d1..71e05be3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -30,7 +30,6 @@ import { ref, watch, } from 'vue' -import CustomTeleport from './components/teleport/custom-teleport.vue' import { useDevice } from './composables/use-device.composable' import { FeatureFlag, useFeatureFlags } from './composables/use-feature-flags.composable' import { isIOS, removeSearchInputFocus } from './composables/use-ios-utils-composable' @@ -40,6 +39,9 @@ import './tailwind/index.css' const MainModal = defineAsyncComponent(() => import('./components/custom-main-modal.vue').then(m => m.default), ) +const CustomTeleport = defineAsyncComponent(() => + import('./components/teleport/custom-teleport.vue').then(m => m.default), +) const x = use$x() const appInstance = getCurrentInstance() diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue index 2de44a28..b297599e 100644 --- a/src/components/predictive-layer/full-width-predictive.vue +++ b/src/components/predictive-layer/full-width-predictive.vue @@ -155,23 +155,41 @@ import { TrashIcon, use$x, } from '@empathyco/x-components' -import { Empathize } from '@empathyco/x-components/empathize' -import { - ClearHistoryQueries, - HistoryQueries, - HistoryQuery, -} from '@empathyco/x-components/history-queries' -import { ref } from 'vue' +import { defineAsyncComponent, ref } from 'vue' import { useDevice } from '../../composables/use-device.composable' import { usePredictiveHelpers } from '../../composables/use-predictive-helpers.composable' import DesktopSearchboxAlign from '../desktop/desktop-searchbox-align.vue' -import HistoryQueryFilters from '../history-query-filters.vue' import MaxDesktopWidthItem from '../max-desktop-width-item.vue' -import PredictiveIdentifierResults from './predictive-identifier-results.vue' -import PredictiveNextQueries from './predictive-next-queries.vue' -import PredictivePopularSearches from './predictive-popular-searches.vue' -import PredictiveQuerySuggestions from './predictive-query-suggestions.vue' -import SlidingRecommendations from './sliding-recommendations.vue' +const HistoryQuery = defineAsyncComponent(() => + import('@empathyco/x-components/history-queries').then(m => m.HistoryQuery), +) +const HistoryQueries = defineAsyncComponent(() => + import('@empathyco/x-components/history-queries').then(m => m.HistoryQueries), +) +const ClearHistoryQueries = defineAsyncComponent(() => + import('@empathyco/x-components/history-queries').then(m => m.ClearHistoryQueries), +) +const Empathize = defineAsyncComponent(() => + import('@empathyco/x-components/empathize').then(m => m.Empathize), +) +const HistoryQueryFilters = defineAsyncComponent(() => + import('../history-query-filters.vue').then(m => m.default), +) +const PredictiveIdentifierResults = defineAsyncComponent(() => + import('./predictive-identifier-results.vue').then(m => m.default), +) +const PredictiveNextQueries = defineAsyncComponent(() => + import('./predictive-next-queries.vue').then(m => m.default), +) +const PredictivePopularSearches = defineAsyncComponent(() => + import('./predictive-popular-searches.vue').then(m => m.default), +) +const PredictiveQuerySuggestions = defineAsyncComponent(() => + import('./predictive-query-suggestions.vue').then(m => m.default), +) +const SlidingRecommendations = defineAsyncComponent(() => + import('./sliding-recommendations.vue').then(m => m.default), +) const empathizeAnimation = animateScale() as any const suggestionsAnimation = StaggeredFadeAndSlide as any diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue index ebe68a31..e06810a3 100644 --- a/src/components/predictive-layer/predictive-layer.vue +++ b/src/components/predictive-layer/predictive-layer.vue @@ -137,20 +137,39 @@ import { TrashIcon, use$x, } from '@empathyco/x-components' -import { Empathize } from '@empathyco/x-components/empathize' -import { - ClearHistoryQueries, - HistoryQueries, - HistoryQuery, -} from '@empathyco/x-components/history-queries' +import { defineAsyncComponent } from 'vue' import { useDevice } from '../../composables/use-device.composable' import { usePredictiveHelpers } from '../../composables/use-predictive-helpers.composable' -import HistoryQueryFilters from '../history-query-filters.vue' -import PredictiveIdentifierResults from './predictive-identifier-results.vue' -import PredictiveNextQueries from './predictive-next-queries.vue' -import PredictivePopularSearches from './predictive-popular-searches.vue' -import PredictiveQuerySuggestions from './predictive-query-suggestions.vue' -import SlidingRecommendations from './sliding-recommendations.vue' +const HistoryQuery = defineAsyncComponent(() => + import('@empathyco/x-components/history-queries').then(m => m.HistoryQuery), +) +const HistoryQueries = defineAsyncComponent(() => + import('@empathyco/x-components/history-queries').then(m => m.HistoryQueries), +) +const ClearHistoryQueries = defineAsyncComponent(() => + import('@empathyco/x-components/history-queries').then(m => m.ClearHistoryQueries), +) +const Empathize = defineAsyncComponent(() => + import('@empathyco/x-components/empathize').then(m => m.Empathize), +) +const HistoryQueryFilters = defineAsyncComponent(() => + import('../history-query-filters.vue').then(m => m.default), +) +const PredictiveIdentifierResults = defineAsyncComponent(() => + import('./predictive-identifier-results.vue').then(m => m.default), +) +const PredictiveNextQueries = defineAsyncComponent(() => + import('./predictive-next-queries.vue').then(m => m.default), +) +const PredictivePopularSearches = defineAsyncComponent(() => + import('./predictive-popular-searches.vue').then(m => m.default), +) +const PredictiveQuerySuggestions = defineAsyncComponent(() => + import('./predictive-query-suggestions.vue').then(m => m.default), +) +const SlidingRecommendations = defineAsyncComponent(() => + import('./sliding-recommendations.vue').then(m => m.default), +) const empathizeAnimation = animateScale() const suggestionsAnimation = StaggeredFadeAndSlide as any diff --git a/src/components/teleport/custom-teleport.vue b/src/components/teleport/custom-teleport.vue index 465b2f44..d4cebe44 100644 --- a/src/components/teleport/custom-teleport.vue +++ b/src/components/teleport/custom-teleport.vue @@ -62,36 +62,39 @@ import { BaseTeleport, ChevronLeftIcon, CrossTinyIcon, - LocationProvider, use$x, } from '@empathyco/x-components' -import { computed, defineComponent, inject, ref } from 'vue' +import { computed, defineAsyncComponent, defineComponent, inject, ref } from 'vue' import { useDevice } from '../../composables/use-device.composable' import { useHasSearched } from '../../composables/use-has-searched.composable' import VariantSelector from '../add2cart/variant-selector.vue' import MyHistoryAside from '../my-history/my-history-aside.vue' import MyHistoryConfirmDisableModal from '../my-history/my-history-confirm-disable-modal.vue' -import PredictiveLayer from '../predictive-layer/predictive-layer.vue' -import SearchBox from '../search-box.vue' import { DesktopAside } from '../search/index' -import DesktopTeleport from './desktop-teleport.vue' -import MobileTeleport from './mobile-teleport.vue' export default defineComponent({ components: { DesktopAside, - PredictiveLayer, - LocationProvider, - SearchBox, BaseTeleport, - DesktopTeleport, BaseIdModal, - MobileTeleport, MyHistoryAside, MyHistoryConfirmDisableModal, CrossTinyIcon, ChevronLeftIcon, VariantSelector, + DesktopTeleport: defineAsyncComponent(() => + import('./desktop-teleport.vue').then(m => m.default), + ), + LocationProvider: defineAsyncComponent(() => + import('@empathyco/x-components').then(m => m.LocationProvider), + ), + MobileTeleport: defineAsyncComponent(() => + import('./mobile-teleport.vue').then(m => m.default), + ), + SearchBox: defineAsyncComponent(() => import('../search-box.vue').then(m => m.default)), + PredictiveLayer: defineAsyncComponent(() => + import('../predictive-layer/predictive-layer.vue').then(m => m.default), + ), }, setup() { const x = use$x()