feat(theme): add LoadWhenVisible component and lazyload footer

- update social icons to reduce weight and increase quality
- load footer only when visible

Author: bartoszherba

packages/theme/components/AppFooter.vue

@@ -120,6 +120,8 @@ export default {
   }
   &__social-image {
     margin: 0 var(--spacer-2xs) 0 0;
+    background-color: #fff;
+    border-radius: 100%;
   }
 }
 .sf-footer {

packages/theme/components/utils/LoadWhenVisible.vue

@@ -0,0 +1,53 @@
+<template>
+  <div ref="root">
+    <slot v-if="isVisible" />
+  </div>
+</template>
+<script>
+import {
+  defineComponent, onMounted, onUnmounted, ref,
+} from '@nuxtjs/composition-api';
+
+export default defineComponent({
+  name: 'LoadWhenVisible',
+  props: {
+    options: {
+      type: Object,
+      default: () => ({
+        rootMargin: '0px 0px 200px 0px',
+      }),
+    },
+
+  },
+  setup({ options }) {
+    const isVisible = ref(false);
+    const root = ref(null);
+
+    let observer = null;
+    if (process.browser && ('IntersectionObserver' in window)) {
+      observer = new IntersectionObserver((entries) => {
+        if (entries[0].intersectionRatio <= 0) return;
+        observer.unobserve(root.value);
+        isVisible.value = true;
+      }, options);
+    }
+
+    onMounted(() => {
+      if (observer) {
+        observer.observe(root.value);
+      }
+    });
+
+    onUnmounted(() => {
+      if (observer) {
+        observer.unobserve(root.value);
+      }
+    });
+
+    return {
+      root,
+      isVisible,
+    };
+  },
+});
+</script>

packages/theme/layouts/default.vue

@@ -12,7 +12,9 @@
       <nuxt :key="route.fullPath" />
     </div>
     <BottomNavigation />
-    <AppFooter />
+    <LoadWhenVisible>
+      <AppFooter />
+    </LoadWhenVisible>
   </div>
 </template>
 
@@ -25,6 +27,7 @@ import {
   useUser,
 } from '@vue-storefront/magento';
 import useUiState from '~/composables/useUiState.ts';
+import LoadWhenVisible from '~/components/utils/LoadWhenVisible';
 
 import { useMagentoConfiguration } from '~/composables/useMagentoConfiguration';
 import AppHeader from '~/components/AppHeader.vue';
@@ -35,6 +38,7 @@ export default defineComponent({
   name: 'DefaultLayout',
 
   components: {
+    LoadWhenVisible,
     LazyHydrate,
     AppHeader,
     TopBar,