perf: load the main product image eagerly on PDP (#1717)

* because it is the LCP on this page
* first product image on product image slider

src/app/pages/product/product-images/product-images.component.html

@@ -23,6 +23,7 @@
                 [ngClass]="{ 'product-image-zoom': zoomImageIds$ | async }"
                 imageType="L"
                 [imageView]="imageView"
+                [loading]="i === 0 ? 'eager' : 'lazy'"
               />
             </div>
           </ng-template>

src/app/shared/components/product/product-image/product-image.component.html

@@ -13,7 +13,7 @@
   <ng-container *ngIf="productImage$ | async as image; else noImage">
     <img
       *ngIf="image.effectiveUrl; else noImage"
-      loading="lazy"
+      [attr.loading]="loading"
       class="product-image"
       [src]="image.effectiveUrl"
       [attr.height]="image.imageActualHeight"
@@ -25,7 +25,7 @@
 
   <ng-template #noImage>
     <img
-      loading="lazy"
+      [attr.loading]="loading"
       class="product-image"
       src="/assets/img/not-available.svg"
       [attr.alt]="'product.image.not_available.alttext' | translate"

src/app/shared/components/product/product-image/product-image.component.ts

@@ -39,6 +39,10 @@ export class ProductImageComponent implements OnInit {
    * A custom alt text for the img tag.
    */
   @Input() altText: string;
+  /**
+   * The image loading strategy.
+   */
+  @Input() loading: 'lazy' | 'eager' | 'auto' = 'lazy';
 
   productURL$: Observable<string>;
   productImage$: Observable<Image>;