.product-thumb
  %a{"ng-click" => "triggerProductModal()"}
    %span.product-thumb__bulk-label{"ng-if" => "::product.group_buy"}
      = t(".bulk")
    %img{"ng-src" => "{{::product.primaryImageOrMissing}}"}

.summary
  .summary-header
    %h3
      %a{"ng-click" => "triggerProductModal()", href: 'javascript:void(0)'}
        %span{"ng-bind" => "::product.name"}
    %p.product-description{ng: {bind: "::product.description", click: "triggerProductModal()", show: "product.description.length"}}
    .product-producer
      = t :products_from
      %span
        %enterprise-modal
          %span{"ng-bind" => "::enterprise.name"}

    .product-properties.filter-shopfront.property-selectors
      %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }

.product-thumb
  %a{"ng-click" => "triggerProductModal()"}
    %span.product-thumb__bulk-label{"ng-if" => "::product.group_buy"}
      = t(".bulk")
    %img{"ng-src" => "{{::product.primaryImageOrMissing}}", loading: "lazy"}

.summary
  .summary-header
    %h3
      %a{"ng-click" => "triggerProductModal()", href: 'javascript:void(0)'}
        %span{"ng-bind" => "::product.name"}
    %p.product-description{ng: {bind: "::product.description", click: "triggerProductModal()", show: "product.description.length"}}
    .product-producer
      = t :products_from
      %span
        %enterprise-modal
          %span{"ng-bind" => "::enterprise.name"}

    .product-properties.filter-shopfront.property-selectors
      %filter-selector{ 'selector-set' => "productPropertySelectors", objects: "[product] | propertiesWithValuesOf" }

Load product images in the shop lazily
Load product images in the shop lazily

The browser decides when to load the image, usually when it's close to
the viewport.
