diff --git a/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx b/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx index ed63d26b3..cf4103066 100644 --- a/studio/src/app/components/editor/slide/app-slide-thumbnail/app-slide-thumbnail.tsx +++ b/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 = this.deckPreviewRef.querySelectorAll('deckgo-lazy-img'); + const promises: Promise[] = Array.from(images).map((img: HTMLDeckgoLazyImgElement) => { + img.customLoader = true; + return img.lazyLoad(); + }); + await Promise.all(promises); + } + + private async lazyLoadCharts() { + const imgs: NodeListOf = this.deckPreviewRef.querySelectorAll('deckgo-slide-chart'); + const promises: Promise[] = Array.from(imgs).map((img: HTMLDeckgoSlideChartElement) => { + img.customLoader = true; + return img.lazyLoadContent(); + }); + await Promise.all(promises); + } + render() { return {this.renderMiniature()}; }