@lancom/shared 0.0.240 → 0.0.242

package/components/faq/faq-async.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="FaqAsync__wrapper">
+    <placeholder
+      v-if="!isLoadedComponent"
+      style="height: 300px" />
+    <faq
+      v-else
+      v-bind="$attrs">
+      <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope">
+        <slot :name="slot" v-bind="scope"></slot>
+      </template>
+    </faq>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ComponentAsyncMixin from '@lancom/shared/mixins/component-async';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
+
+export default {
+  name: 'FaqAsync',
+  components: {
+    Placeholder
+  },
+  mixins: [ComponentAsyncMixin],
+  methods: {
+    async importComponents() {
+      const component = await import('./faq');
+      Vue.component('faq', component.default);
+    }
+  }
+};
+</script>

package/components/placeholder/placeholder.scss

@@ -0,0 +1,19 @@
+.Placeholder {
+  &__wrapper{
+    width: 100%;
+    animation-name: backgroundColorPalette;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    margin: 10px 0;
+  }
+}
+
+@keyframes backgroundColorPalette {
+  0% {
+    background: #efefef;
+  }
+  100% {
+    background: #e4e2e2;
+  }
+}

package/components/placeholder/placeholder.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="Placeholder__wrapper"></div>
+</template>
+
+<script>
+export default {
+  name: 'Placeholder'
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'placeholder';
+</style>

package/components/product/printed_product_images/printed-product-images-async.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="PrintedProductImagesAsync__wrapper">
+    <placeholder
+      v-if="!isLoadedComponent"
+      style="height: 200px" />
+    <printed-product-images
+      v-else
+      v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ComponentAsyncMixin from '@lancom/shared/mixins/component-async';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
+
+export default {
+  name: 'PrintedProductImagesAsync',
+  components: {
+    Placeholder
+  },
+  mixins: [ComponentAsyncMixin],
+  methods: {
+    async importComponents() {
+      const component = await import('./printed-product-images');
+      Vue.component('printed-product-images', component.default);
+    }
+  }
+};
+</script>

package/components/product/product_info_tabs/product-info-tabs-async.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="ProductInfoTabsAsync__wrapper">
+    <placeholder
+      v-if="!isLoadedComponent"
+      style="height: 200px" />
+    <product-info-tabs
+      v-else
+      v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ComponentAsyncMixin from '@lancom/shared/mixins/component-async';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
+
+export default {
+  name: 'ProductInfoTabsAsync',
+  components: {
+    Placeholder
+  },
+  mixins: [ComponentAsyncMixin],
+  methods: {
+    async importComponents() {
+      const component = await import('./product-info-tabs');
+      Vue.component('product-info-tabs', component.default);
+    }
+  }
+};
+</script>

package/components/product/product_reviews/product-reviews-async.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="ProductReviewsAsync__wrapper">
+    <placeholder
+      v-if="!isLoadedComponent"
+      style="height: 200px" />
+    <product-reviews
+      v-else
+      v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ComponentAsyncMixin from '@lancom/shared/mixins/component-async';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
+
+export default {
+  name: 'ProductReviewsAsync',
+  components: {
+    Placeholder
+  },
+  mixins: [ComponentAsyncMixin],
+  methods: {
+    async importComponents() {
+      const component = await import('./product-reviews');
+      Vue.component('product-reviews', component.default);
+    }
+  }
+};
+</script>

package/components/product/related_products/related-products-async.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="RelatedProductsAsync__wrapper">
+    <placeholder
+      v-if="!isLoadedComponent"
+      style="height: 200px" />
+    <related-products
+      v-else
+      v-bind="$attrs" />
+  </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import ComponentAsyncMixin from '@lancom/shared/mixins/component-async';
+import Placeholder from '@lancom/shared/components/placeholder/placeholder';
+
+export default {
+  name: 'RelatedProductsAsync',
+  components: {
+    Placeholder
+  },
+  mixins: [ComponentAsyncMixin],
+  methods: {
+    async importComponents() {
+      const component = await import('./related-products');
+      Vue.component('related-products', component.default);
+    }
+  }
+};
+</script>

package/mixins/component-async.js

@@ -0,0 +1,26 @@
+export default {
+  data() {
+    return {
+      isLoadedComponent: false,
+      observer: null
+    };
+  },
+  async mounted() {
+    if (process.client && !this.isLoadedComponent) {
+      this.observer = new IntersectionObserver(async (entries) => {
+        if(entries[0].isIntersecting === true) {
+          await this.importComponents();
+          this.isLoadedComponent = true;
+        }
+      }, { threshold: [0.1] });
+      
+      this.observer.observe(this.$el);
+    }
+  },
+  destroyed() {
+    this.observer.unobserve(this.$el);
+  },
+  methods: {
+    async importComponents() {}
+  }
+};

package/nuxt.config.js

@@ -91,9 +91,9 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
   },
   build: {
     splitChunks: {
-      layouts: false,
-      pages: false,
-      commons: false
+      layouts: true,
+      pages: true,
+      commons: true
     },
     publicPath: publicPath || '/client/',
     postcss: null,
@@ -111,6 +111,10 @@ module.exports = (config, axios, { raygunClient, publicPath } = {}) => ({
     analyze: !config.IS_LOCAL,
     extractCSS: !config.IS_LOCAL,
   },
+  render: {
+    asyncScripts: true,
+    // resourceHints: false
+  },
   hooks: {
     render: {
       errorMiddleware(app) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lancom/shared",
-  "version": "0.0.240",
+  "version": "0.0.242",
   "description": "lancom common scripts",
   "author": "e.tokovenko <e.tokovenko@gmail.com>",
   "repository": {