perf(theme): appHeader navigation improvement

- add @nuxtjs/device package to recognize used device - remove mobile observer from header and replave it with device recognition tool - navigation is now lazy loaded, categories required for a navigation are not loaded at all on mobile devices
vuestorefront · Feb 18, 2022 · dda4502 · dda4502
1 parent ac62c4a
commit dda4502
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 38 deletions.
diff --git a/packages/theme/components/AppHeader.vue b/packages/theme/components/AppHeader.vue
@@ -19,8 +19,12 @@
           />
         </nuxt-link>
       </template>
-      <template #navigation>
-        <SfHeaderNavigationItem
+
+      <template
+        v-if="$device.isDesktop"
+        #navigation
+      >
+        <HeaderNavigationItem
           v-for="(category, index) in categoryTree"
           :key="index"
           v-e2e="'app-header-url_women'"
@@ -120,7 +124,7 @@
               v-if="!!term"
               class="sf-search-bar__button sf-button--pure"
               aria-label="Close search"
-              @click="closeOrFocusSearchBar"
+              @click="closeSearch"
             >
               <span class="sf-search-bar__icon">
                 <SfIcon
@@ -170,6 +174,7 @@ import {
   SfSearchBar,
   SfOverlay,
 } from '@storefront-ui/vue';
+
 import {
   categoryGetters,
   useCart,
@@ -181,19 +186,14 @@ import {
 import {
   computed,
   ref,
-  onBeforeUnmount,
-  watch,
   defineComponent,
   useRouter,
   useContext,
-  useAsync,
+  useFetch,
 } from '@nuxtjs/composition-api';
 import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js';
-import {
-  mapMobileObserver,
-  unMapMobileObserver,
-} from '@storefront-ui/vue/src/utilities/mobile-observer.js';
 import debounce from 'lodash.debounce';
+import HeaderNavigationItem from '~/components/navigation/HeaderNavigationItem.vue';
 import {
   useUiHelpers,
   useUiState,
@@ -203,6 +203,7 @@ import CurrencySelector from '~/components/CurrencySelector.vue';
 
 export default defineComponent({
   components: {
+    HeaderNavigationItem,
     SfHeader,
     CurrencySelector,
     StoreSwitcher,
@@ -254,10 +255,6 @@ export default defineComponent({
       }
     };
 
-    useAsync(async () => {
-      await Promise.all([loadCartTotalQty(), loadWishlistItemsCount(), categoriesListSearch({ pageSize: 20 })]);
-    });
-
     const showSearch = () => {
       if (!isSearchOpen.value) {
         isSearchOpen.value = true;
@@ -293,46 +290,27 @@ export default defineComponent({
       };
     }, 1000);
 
-    const isMobile = computed(() => mapMobileObserver().isMobile.get());
-
-    const closeOrFocusSearchBar = () => {
-      if (isMobile.value) {
-        return closeSearch();
-      }
-      term.value = '';
-      return searchBarRef.value.$el.children[0].focus();
-    };
-
-    watch(() => term.value, (newVal, oldVal) => {
-      const shouldSearchBeOpened = (!isMobile.value && term.value.length > 0)
-        && ((!oldVal && newVal)
-          || (newVal.length !== oldVal.length
-            && isSearchOpen.value === false));
-
-      if (shouldSearchBeOpened) isSearchOpen.value = true;
-    });
-
     const removeSearchResults = () => {
       result.value = null;
     };
 
-    onBeforeUnmount(() => {
-      unMapMobileObserver();
+    useFetch(async () => {
+      if (app.$device.isDesktop) {
+        await Promise.all([loadCartTotalQty(), loadWishlistItemsCount(), categoriesListSearch({ pageSize: 20 })]);
+      }
     });
 
     return {
       accountIcon,
       cartTotalItems,
       categoryTree,
-      closeOrFocusSearchBar,
       closeSearch,
       showSearch,
       hideSearch,
       getAgnosticCatLink,
       handleAccountClick,
       handleSearch,
       isAuthenticated,
-      isMobile,
       isSearchOpen,
       removeSearchResults,
       result,

diff --git a/packages/theme/components/Navigation/HeaderNavigationItem.vue b/packages/theme/components/Navigation/HeaderNavigationItem.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="sf-header-navigation-item">
+    <div class="sf-header-navigation-item__item sf-header-navigation-item__item--desktop">
+      <slot name="desktop-navigation-item">
+        <SfLink
+          class="sf-header-navigation-item__link"
+          :link="link"
+        >
+          {{
+            label
+          }}
+        </SfLink>
+      </slot>
+      <slot />
+    </div>
+  </div>
+</template>
+<script>
+import { SfLink } from '@storefront-ui/vue';
+
+export default {
+  name: 'HeaderNavigationItem',
+  components: {
+    SfLink,
+  },
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    link: {
+      type: [String, Object],
+      default: '',
+    },
+  },
+};
+</script>
diff --git a/packages/theme/nuxt.config.js b/packages/theme/nuxt.config.js
@@ -54,13 +54,17 @@ export default () => {
       ],
     },
     loading: { color: '#fff' },
+    device: {
+      refreshOnResize: true,
+    },
     buildModules: [
       // to core
       '@nuxtjs/composition-api/module',
       '@nuxt/typescript-build',
       '@nuxtjs/google-fonts',
       '@nuxtjs/pwa',
       '@nuxtjs/style-resources',
+      '@nuxtjs/device',
       ['@vue-storefront/nuxt', {
         // @core-development-only-start
         coreDevelopment: true,
@@ -90,7 +94,7 @@ export default () => {
         magentoBaseUrl,
         imageProvider,
         magentoApiEndpoint,
-        customApolloHttpLinkOptions
+        customApolloHttpLinkOptions,
       }],
       '@nuxt/image',
     ],

diff --git a/packages/theme/package.json b/packages/theme/package.json
@@ -60,6 +60,7 @@
     "@babel/core": "^7.16.12",
     "@nuxt/types": "latest",
     "@nuxt/typescript-build": "latest",
+    "@nuxtjs/device": "^2.1.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/user-event": "^13.5.0",
     "@testing-library/vue": "^5.8.2",

diff --git a/yarn.lock b/yarn.lock
@@ -3190,6 +3190,13 @@
     unplugin-vue2-script-setup "^0.7.3"
     upath "^2.0.1"
 
+"@nuxtjs/device@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/device/-/device-2.1.0.tgz#552c668b2d82dc982d18429845777c19d48d87d6"
+  integrity sha512-TYBdt1w2bmCCWp+MhgcBATZtqyUBi3nSdNpcLGILw5USLwCsC/yZtIkq9YisuEzuRnod9w/RZpoE80MxLftEuA==
+  dependencies:
+    defu "^3.2.2"
+
 "@nuxtjs/google-fonts@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@nuxtjs/google-fonts/-/google-fonts-1.3.0.tgz#36cefee4aef4f8b772180c7ed7cc902f02f585c4"