feat(#558): lazy load images on prop update

webcomponents/slides/author/src/components/slide/deckdeckgo-slide-author.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Event, EventEmitter, Method, Prop, h, Host, State} from '@stencil/core';
+import {Component, Element, Event, EventEmitter, Method, Prop, h, Host, State, Watch} from '@stencil/core';
 
 import {isMobile} from '@deckdeckgo/utils';
 
@@ -26,6 +26,8 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
   @State()
   private mobile: boolean = false;
 
+  private lazyLoadAfterUpdate: boolean = false;
+
   componentWillLoad() {
     this.mobile = isMobile();
   }
@@ -36,6 +38,18 @@ export class DeckdeckgoSlideAuthor implements DeckdeckgoSlide {
     this.slideDidLoad.emit();
   }
 
+  @Watch('imgMode')
+  async onPropChanges() {
+    this.lazyLoadAfterUpdate = true;
+  }
+
+  async componentDidUpdate() {
+    if (this.lazyLoadAfterUpdate) {
+      await this.lazyLoadContent();
+      this.lazyLoadAfterUpdate = false;
+    }
+  }
+
   @Method()
   beforeSwipe(_enter: boolean, _reveal: boolean): Promise<boolean> {
     return new Promise<boolean>((resolve) => {

webcomponents/slides/author/src/index.html

@@ -68,7 +68,10 @@ <h2>David Dal Busco</h2>
     <div slot="social-link"><deckgo-social full-url="https://googlegooglegooglegoogle.com"></deckgo-social></div>
   </deckgo-slide-author>
 
-  <button onclick="slideNext()" slot="actions">Action slide next</button>
+  <div slot="actions">
+    <button onclick="toggleMode()">Toggle mode</button>
+    <button onclick="slideNext()">Action slide next</button>
+  </div>
 </deckgo-deck>
 
 <script type="text/javascript">
@@ -78,6 +81,24 @@ <h2>David Dal Busco</h2>
             elem[0].slideNext(false);
         }
     }
+
+    async function toggleMode() {
+        const deck = document.querySelector('deckgo-deck');
+
+        if (!deck) {
+            return;
+        }
+
+        const index = await deck.getActiveIndex();
+
+        const slideElement = document.querySelector('.deckgo-slide-container:nth-child(' + (index + 1) + ')');
+
+        if (!slideElement || slideElement.tagName !== 'deckgo-slide-author'.toUpperCase()) {
+            return;
+        }
+
+        slideElement.setAttribute('img-mode', slideElement.getAttribute('img-mode') === 'circle' ? 'cover' : 'circle');
+    }
 </script>
 
 </body>