perf: lazy load screenshots and icons to improve initial render perfo… (#138)

Author: w3void

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khmyznikov/pwa-install",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "PWA install dialog provide more convenience user experience and fix lack of native dialogs in some browsers.",
   "repository": {
     "type": "git",
@@ -62,7 +62,7 @@
     "copy-webpack-plugin": "^13.0.0",
     "eslint": "^9.26.0",
     "express": "^5.1.0",
-    "filemanager-webpack-plugin": "^8.0.0",
+    "filemanager-webpack-plugin": "^9.0.1",
     "lit-scss-loader": "^2.0.1",
     "minify-lit-html-loader": "github:khmyznikov/minify-lit-html-loader",
     "null-loader": "^4.0.1",
@@ -72,7 +72,7 @@
     "sass": "^1.87.0",
     "sass-loader": "^16.0.5",
     "terser-webpack-plugin": "^5.3.14",
-    "ts-loader": "9.5.2",
+    "ts-loader": "9.5.4",
     "typescript": "^5.8.3",
     "typescript-lit-html-plugin": "^0.9.0",
     "webpack": "^5.99.7",

src/templates/apple/template-apple.ts

@@ -60,7 +60,7 @@ const template = (name: string, description: string, installDescription: string,
                         </div>
                     </div>
                 </div>
-                ${screenshotsAvailable && manifest.screenshots? html`<pwa-gallery .screenshots=${manifest.screenshots} .theme="${isDesktop? 'apple_desktop': 'apple_mobile'}" .rtl="${isRTL}"></pwa-gallery>`: ''}
+                ${screenshotsAvailable && installAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots} .theme="${isDesktop? 'apple_desktop': 'apple_mobile'}" .rtl="${isRTL}"></pwa-gallery>`: ''}
                 <div class="action-buttons">
                     ${screenshotsAvailable? html`<button class="dialog-button button gallery" @click=${toggleGallery}>
                         ${isDesktop? 

src/templates/chrome/template.ts

@@ -29,7 +29,7 @@ const template = (name: string, description: string, installDescription: string,
                     ${!disableDescription? 
                         html`<hr><div class="description install-description">${installDescription? installDescription: `${msg('This site has app functionality.')} ${msg('Install it on your device for extensive experience and easy access.')}`}</div>` 
                         : ''}
-                    ${screenshotsAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots as ManifestScreenshot[]} .rtl="${isRTL}"></pwa-gallery>`: ''}
+                    ${screenshotsAvailable && installAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots as ManifestScreenshot[]} .rtl="${isRTL}"></pwa-gallery>`: ''}
                     <div class="action-buttons">
                         ${screenshotsAvailable? html`<button class="material-button secondary" @click='${toggleGallery}'>${galleryRequested?msg('Less'):msg('More')}</button>`:''}
                         <button class="material-button primary install" @click='${install}'>${msg('Install')}</button>
@@ -38,7 +38,7 @@ const template = (name: string, description: string, installDescription: string,
             </div>
             <div class="install-dialog chrome mobile ${classMap(installDialogClasses())}">
                 <pwa-bottom-sheet .props=${{name, icon, description}} .disableClose=${disableClose} .install=${install} .hideDialog=${hideDialog} .toggleHowTo=${toggleHowTo} .howToRequested=${howToRequested} .fallback=${isAndroidFallback}>
-                    ${screenshotsAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots as ManifestScreenshot[]} .rtl="${isRTL}"></pwa-gallery>`: ''}
+                    ${screenshotsAvailable && installAvailable? html`<pwa-gallery .screenshots=${manifest.screenshots as ManifestScreenshot[]} .rtl="${isRTL}"></pwa-gallery>`: ''}
                 </pwa-bottom-sheet>
             </div>
         </div>`;