From f74d2d79119c8dad6d5a8ca85be48cb6f7e3d681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Igor=20Ste=CC=A8pien=CC=81?= <igor@istepien.dev>
Date: Tue, 24 Oct 2023 00:10:40 +0200
Subject: [PATCH] Lazyload removed lib removed

---
 _dev/css/theme/components/_index.scss         |  1 -
 .../css/theme/components/lazyload/_index.scss |  1 -
 .../theme/components/lazyload/_lazyload.scss  |  5 -----
 _dev/js/theme/components/Lazyload.js          | 21 -------------------
 _dev/js/theme/index.js                        |  5 -----
 .../miniatures/_partials/product-thumb.tpl    |  5 +++--
 .../catalog/_partials/miniatures/brand.tpl    |  6 +++---
 .../_partials/miniatures/pack-product.tpl     |  5 +++--
 .../_partials/product-cover-thumbnails.tpl    | 21 +++++++++++--------
 .../_partials/product-images-modal.tpl        | 12 ++++++-----
 .../_partials/cart-detailed-product-line.tpl  |  2 +-
 .../_partials/cart-summary-product-line.tpl   |  2 +-
 .../_partials/order-details-return-table.tpl  |  2 +-
 .../customer/_partials/product-table-line.tpl |  2 +-
 14 files changed, 32 insertions(+), 58 deletions(-)
 delete mode 100644 _dev/css/theme/components/lazyload/_index.scss
 delete mode 100644 _dev/css/theme/components/lazyload/_lazyload.scss
 delete mode 100644 _dev/js/theme/components/Lazyload.js

diff --git a/_dev/css/theme/components/_index.scss b/_dev/css/theme/components/_index.scss
index 22c276d3..34450a05 100644
--- a/_dev/css/theme/components/_index.scss
+++ b/_dev/css/theme/components/_index.scss
@@ -9,5 +9,4 @@
 @import "search/index";
 @import "page-loader/index";
 @import "links-list/index";
-@import "lazyload/index";
 @import "alert-toast/index";
diff --git a/_dev/css/theme/components/lazyload/_index.scss b/_dev/css/theme/components/lazyload/_index.scss
deleted file mode 100644
index 1ce293c7..00000000
--- a/_dev/css/theme/components/lazyload/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "lazyload";
diff --git a/_dev/css/theme/components/lazyload/_lazyload.scss b/_dev/css/theme/components/lazyload/_lazyload.scss
deleted file mode 100644
index 78dc3128..00000000
--- a/_dev/css/theme/components/lazyload/_lazyload.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-img.lazyload {
-  &:not(.loaded) {
-    background: $gray-200;
-  }
-}
diff --git a/_dev/js/theme/components/Lazyload.js b/_dev/js/theme/components/Lazyload.js
deleted file mode 100644
index 1a0eb120..00000000
--- a/_dev/js/theme/components/Lazyload.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import LazyLoad from 'vanilla-lazyload';
-
-class PageLazyLoad {
-  constructor({ selector = '.lazyload' } = {}) {
-    this.selector = selector;
-    this.lazyLoadInstance = null;
-    this.init();
-  }
-
-  init() {
-    this.lazyLoadInstance = new LazyLoad({
-      elements_selector: this.selector,
-    });
-  }
-
-  update() {
-    this.lazyLoadInstance.update();
-  }
-}
-
-export default PageLazyLoad;
diff --git a/_dev/js/theme/index.js b/_dev/js/theme/index.js
index 7fd4cece..db020550 100644
--- a/_dev/js/theme/index.js
+++ b/_dev/js/theme/index.js
@@ -19,15 +19,10 @@ for (const i in EventEmitter.prototype) {
 }
 import usePasswordPolicy from './components/password/usePasswordPolicy';
 import useThemeForm from './components/useThemeForm';
-import PageLazyLoad from './components/Lazyload';
 import httpRequestErrorHandler from './handler/error/httpRequestErrorHandler';
 import usePageLoader from "./components/usePageLoader";
 import { DOMReady } from "../utils/DOM/DOMHelpers";
 
-prestashop.pageLazyLoad = new PageLazyLoad({
-  selector: '.lazyload',
-});
-
 prestashop.pageLoader = usePageLoader();
 
 prestashop.on('handleError', httpRequestErrorHandler);
diff --git a/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl b/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl
index a02cea53..03c60784 100644
--- a/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl
+++ b/templates/catalog/_partials/miniatures/_partials/product-thumb.tpl
@@ -5,7 +5,7 @@
         <img
           {if $product.default_image}
             data-full-size-image-url="{$product.default_image.large.url}"
-            {generateImagesSources image=$product.default_image size='home_default' lazyload=true}
+            {generateImagesSources image=$product.default_image size='home_default'}
             alt="{if !empty($product.default_image.legend)}{$product.default_image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
             width="{$product.default_image.bySize.home_default.width}"
             height="{$product.default_image.bySize.home_default.height}"
@@ -15,7 +15,8 @@
             width="{$urls.no_picture_image.bySize.home_default.width}"
             height="{$urls.no_picture_image.bySize.home_default.height}"
           {/if}
-          class="img-fluid rounded lazyload"
+          class="img-fluid rounded"
+          loading="lazy"
           />
       {/images_block}
 
diff --git a/templates/catalog/_partials/miniatures/brand.tpl b/templates/catalog/_partials/miniatures/brand.tpl
index 1038a4a2..17b9d9f2 100644
--- a/templates/catalog/_partials/miniatures/brand.tpl
+++ b/templates/catalog/_partials/miniatures/brand.tpl
@@ -27,12 +27,12 @@
     <div class="card h-100">
       {$sizes = Image::getSize('home_default')}
       <img
-        src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='{$sizes.width}' height='{$sizes.height}' viewBox='0 0 1 1'%3E%3C/svg%3E"
-        data-src="{$brand.image|replace:'small_default':'home_default'}"
+        src="{$brand.image|replace:'small_default':'home_default'}"
         alt="{$brand.name}"
-        class="card-img-top lazyload"
+        class="card-img-top"
         width="{$sizes.width}"
         height="{$sizes.height}"
+        loading="lazy"
         >
       <div class="card-body">
         <p class="h6 mb-0">
diff --git a/templates/catalog/_partials/miniatures/pack-product.tpl b/templates/catalog/_partials/miniatures/pack-product.tpl
index 8c2e7b7a..fa17b280 100644
--- a/templates/catalog/_partials/miniatures/pack-product.tpl
+++ b/templates/catalog/_partials/miniatures/pack-product.tpl
@@ -29,8 +29,9 @@
         <a href="{$product.url}" title="{$product.name}">
           {images_block webpEnabled=$webpEnabled}
             <img
-              class="img-fluid lazyload"
-              {generateImagesSources image=$product.default_image size='cart_default' lazyload=true}
+              class="img-fluid"
+              loading="lazy"
+              {generateImagesSources image=$product.default_image size='cart_default'}
               width="{$product.default_image.bySize.cart_default.width}"
               height="{$product.default_image.bySize.cart_default.height}"
               {if !empty($product.default_image.legend)}
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 340c9963..f2e13291 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -31,7 +31,7 @@
           {if $product.default_image}
             <img
               class="rounded img-fluid"
-              {generateImagesSources image=$product.default_image size='large_default' lazyload=false}
+              {generateImagesSources image=$product.default_image size='large_default'}
               width="{$product.default_image.bySize.large_default.width}"
               height="{$product.default_image.bySize.large_default.height}"
               {if !empty($product.default_image.legend)}
@@ -63,7 +63,7 @@
                   <div class="swiper-slide">
                     <img
                       class="rounded img-fluid"
-                      {generateImagesSources image=$product.default_image size='large_default' lazyload=false}
+                      {generateImagesSources image=$product.default_image size='large_default'}
                       width="{$product.default_image.bySize.large_default.width}"
                       height="{$product.default_image.bySize.large_default.height}"
                       {if !empty($product.default_image.legend)}
@@ -83,8 +83,9 @@
 
                       <div class="swiper-slide" data-index="{$index}">
                         <img
-                          class="rounded img-fluid lazyload"
-                          {generateImagesSources image=$image size='large_default' lazyload=true}
+                          class="rounded img-fluid"
+                          loading="lazy"
+                          {generateImagesSources image=$image size='large_default' }
                           width="{$image.bySize.large_default.width}"
                           height="{$image.bySize.large_default.height}"
                           {if !empty($product.default_image.legend)}
@@ -112,7 +113,7 @@
             {images_block webpEnabled=$webpEnabled}
               <img
                 class="rounded img-fluid"
-                {generateImagesSources image=$product.default_image size='large_default' lazyload=false}
+                {generateImagesSources image=$product.default_image size='large_default'}
                 width="{$product.default_image.bySize.large_default.width}"
                 height="{$product.default_image.bySize.large_default.height}"
                 {if !empty($product.default_image.legend)}
@@ -141,8 +142,9 @@
             <div class="product-thumbs__list swiper-wrapper">
               <div class="product-thumbs__elem swiper-slide">
                 <img
-                  class="rounded img-fluid lazyload"
-                  {generateImagesSources image=$product.default_image size='home_default' lazyload=true}
+                  class="rounded img-fluid"
+                  loading="lazy"
+                  {generateImagesSources image=$product.default_image size='home_default'}
                   width="{$product.default_image.bySize.home_default.width}"
                   height="{$product.default_image.bySize.home_default.height}"
                   {if !empty($product.default_image.legend)}
@@ -160,8 +162,9 @@
                   {/if}
                   <div class="product-thumbs__elem swiper-slide">
                     <img
-                      class="rounded img-fluid lazyload"
-                      {generateImagesSources image=$image size='home_default' lazyload=true}
+                      class="rounded img-fluid"
+                      loading="lazy"
+                      {generateImagesSources image=$image size='home_default'}
                       width="{$image.bySize.home_default.width}"
                       height="{$image.bySize.home_default.height}"
                       {if !empty($product.default_image.legend)}
diff --git a/templates/catalog/_partials/product-images-modal.tpl b/templates/catalog/_partials/product-images-modal.tpl
index cf6b7e6d..705b0dd2 100644
--- a/templates/catalog/_partials/product-images-modal.tpl
+++ b/templates/catalog/_partials/product-images-modal.tpl
@@ -32,10 +32,11 @@
             <div class="modal-gallery__list swiper-wrapper">
               <div class="swiper-slide modal-gallery__elem">
                 <img
-                  class="rounded img-fluid lazyload"
-                  {generateImagesSources image=$product.default_image size='large_default' lazyload=false}
+                  class="rounded img-fluid"
+                  {generateImagesSources image=$product.default_image size='large_default'}
                   width="{$product.default_image.bySize.large_default.width}"
                   height="{$product.default_image.bySize.large_default.height}"
+                  loading="lazy"
                   {if !empty($product.default_image.legend)}
                     alt="{$product.default_image.legend}"
                     title="{$product.default_image.legend}"
@@ -53,10 +54,11 @@
 
                   <div class="swiper-slide modal-gallery__elem">
                     <img
-                      class="rounded img-fluid lazyload"
-                      {generateImagesSources image=$image size='large_default' lazyload=true}
+                      class="rounded img-fluid"
+                      {generateImagesSources image=$image size='large_default'}
                       width="{$image.bySize.large_default.width}"
                       height="{$image.bySize.large_default.height}"
+                      loading="lazy"
                       {if !empty($product.default_image.legend)}
                         alt="{$image.legend}" title="{$image.legend}"
                       {else}
@@ -74,7 +76,7 @@
             {images_block webpEnabled=$webpEnabled}
               <img
                 class="rounded img-fluid"
-                {generateImagesSources image=$product.default_image size='large_default' lazyload=false}
+                {generateImagesSources image=$product.default_image size='large_default'}
                 width="{$product.default_image.bySize.large_default.width}"
                 height="{$product.default_image.bySize.large_default.height}"
                 {if !empty($product.default_image.legend)}
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index efa15817..5256edf9 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -27,7 +27,7 @@
     <div class="product-line-grid__block product-line-grid__block--image">
       {images_block webpEnabled=$webpEnabled}
         <img
-          {generateImagesSources image=$product.default_image size='cart_default' lazyload=false}
+          {generateImagesSources image=$product.default_image size='cart_default'}
           alt="{$product.name|escape:'quotes'}"
           class="img-fluid rounded"
           width="{$product.default_image.bySize.cart_default.width}"
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index dae1d303..2175b0b0 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -28,7 +28,7 @@
       {images_block webpEnabled=$webpEnabled}
         <img
           {if $product.default_image}
-            {generateImagesSources image=$product.default_image size='cart_default' lazyload=false}
+            {generateImagesSources image=$product.default_image size='cart_default'}
           {else}
             src="{$urls.no_picture_image.bySize.cart_default.url}"
           {/if}
diff --git a/templates/customer/_partials/order-details-return-table.tpl b/templates/customer/_partials/order-details-return-table.tpl
index 1b77ca4e..8b963c52 100644
--- a/templates/customer/_partials/order-details-return-table.tpl
+++ b/templates/customer/_partials/order-details-return-table.tpl
@@ -55,7 +55,7 @@
         {images_block webpEnabled=$webpEnabled}
           {if $product.default_image}
             <img
-              {generateImagesSources image=$product.cover size='cart_default' lazyload=false}
+              {generateImagesSources image=$product.cover size='cart_default'}
               alt="{$product.name|escape:'quotes'}"
               class="product-line__img rounded img-fluid"
               width="{$product.cover.bySize.cart_default.width}"
diff --git a/templates/customer/_partials/product-table-line.tpl b/templates/customer/_partials/product-table-line.tpl
index ddafa8e3..da4f2f1a 100644
--- a/templates/customer/_partials/product-table-line.tpl
+++ b/templates/customer/_partials/product-table-line.tpl
@@ -2,7 +2,7 @@
   {images_block webpEnabled=$webpEnabled}
     {if $product.default_image}
       <img
-        {generateImagesSources image=$product.default_image size='cart_default' lazyload=false}
+        {generateImagesSources image=$product.default_image size='cart_default'}
         alt="{$product.name|escape:'quotes'}"
         class="product-line__img rounded img-fluid"
         width="{$product.default_image.bySize.cart_default.width}"