fix: lazy load local thumbnails slides' images and charts (#1311)

Author: peterpeterparker

studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx

@@ -64,6 +64,8 @@ export class AppSlideThumbnail {
     const content: string = await cleanContent(this.slide.outerHTML);
 
     this.deckPreviewRef.innerHTML = content;
+
+    await Promise.all([this.lazyLoadImages(), this.lazyLoadCharts()]);
   }
 
   private async blockSlide($event: CustomEvent) {
@@ -72,6 +74,24 @@ export class AppSlideThumbnail {
     await this.deckPreviewRef?.blockSlide(true);
   }
 
+  private async lazyLoadImages() {
+    const images: NodeListOf<HTMLDeckgoLazyImgElement> = this.deckPreviewRef.querySelectorAll('deckgo-lazy-img');
+    const promises: Promise<void>[] = Array.from(images).map((img: HTMLDeckgoLazyImgElement) => {
+      img.customLoader = true;
+      return img.lazyLoad();
+    });
+    await Promise.all(promises);
+  }
+
+  private async lazyLoadCharts() {
+    const imgs: NodeListOf<HTMLDeckgoSlideChartElement> = this.deckPreviewRef.querySelectorAll('deckgo-slide-chart');
+    const promises: Promise<void>[] = Array.from(imgs).map((img: HTMLDeckgoSlideChartElement) => {
+      img.customLoader = true;
+      return img.lazyLoadContent();
+    });
+    await Promise.all(promises);
+  }
+
   render() {
     return <Host>{this.renderMiniature()}</Host>;
   }