@covet-pics/covet-pics-widget 0.162.3 → 0.162.4

package/dist/cjs/covet-pics-widget.cjs.entry.js

@@ -956,7 +956,7 @@ function configureStore () {
 }
 // export default store;
 
-const covetPicsWidgetCss = ":host{--covet-font-family:var(--covet-custom-font-family, var(--covet-internal-font-family)), sans-serif}:host{font-family:var(--covet-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block}:host .error-message{text-align:center;border:2px dashed;padding:20px}";
+const covetPicsWidgetCss = ":host{--covet-font-family:var(--covet-custom-font-family, var(--covet-internal-font-family)), sans-serif}:host{font-family:var(--covet-font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:block;min-height:var(--covet-widget-min-height)}:host .error-message{text-align:center;border:2px dashed;padding:20px}";
 const CovetPicsWidgetStyle0 = covetPicsWidgetCss;
 
 const CovetPicsWidget = class {
@@ -968,6 +968,10 @@ const CovetPicsWidget = class {
          * Shows whether widget is embedded to a preview page
          */
         this.previewMode = false;
+        /**
+        * Lazy load widget
+        */
+        this.lazyLoad = false;
         this.isLoading = true;
         this.items = [];
         this.fetchingError = null;
@@ -1049,11 +1053,52 @@ const CovetPicsWidget = class {
         this.loadData();
     }
     componentWillLoad() {
+        if (this.lazyLoad) {
+            this.setupLazyLoading();
+        }
+        else {
+            this.initApp();
+        }
+    }
+    setupLazyLoading() {
+        const MIN_HEIGHT_PROPERTY = '--covet-widget-min-height';
+        this.el.style.setProperty(MIN_HEIGHT_PROPERTY, '5px');
+        this.intersectionObserver = this.observeElementVisibility(this.el, () => {
+            this.initApp();
+            this.widgetResizeObserver();
+            this.el.style.setProperty(MIN_HEIGHT_PROPERTY, '0');
+        });
+    }
+    componentDidLoad() {
+        if (!this.lazyLoad) {
+            this.widgetResizeObserver();
+        }
+    }
+    disconnectedCallback() {
+        this.unsubscribe();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+        }
+    }
+    observeElementVisibility(el, callback) {
+        const observer = new IntersectionObserver(entries => {
+            if (entries.length > 0 && entries[0].isIntersecting) {
+                callback();
+                observer.unobserve(el);
+            }
+        });
+        observer.observe(el);
+        return observer;
+    }
+    initApp() {
         this.initAppStore();
         this.setupLoader();
         this.loadData();
     }
-    componentDidLoad() {
+    widgetResizeObserver() {
         this.resizeObserver = new ResizeObserver(() => {
             const isWindowHeightChanged = this.appState.size.windowHeight !== window.innerHeight;
             if (isWindowHeightChanged) {
@@ -1069,10 +1114,6 @@ const CovetPicsWidget = class {
             this.resizeObserver.observe(this.el.parentElement);
         }
     }
-    disconnectedCallback() {
-        this.unsubscribe();
-        this.resizeObserver.disconnect();
-    }
     initAppStore() {
         this.appStore = configureStore();
         const widgetIdParams = storeUtils.getWidgetId(this.galleryEmbedId, this.shop, this.photoRequestId, this.el);