From ba925fabfcf5ca2ecf216725b8fbdab851d772bc Mon Sep 17 00:00:00 2001
From: "khadar.yonis" <khadar.yonis@gmail.com>
Date: Wed, 15 Jun 2022 15:56:21 +0200
Subject: [PATCH 1/2] minor

---
 resources/views/site/product.blade.php | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/views/site/product.blade.php b/resources/views/site/product.blade.php
index 779e9bfea..b7e9ad993 100644
--- a/resources/views/site/product.blade.php
+++ b/resources/views/site/product.blade.php
@@ -21,9 +21,7 @@
                     </span>
                 </a>
                 </div><!-- /.BackToCollection -->
-                
-        
-        
+
                 <section class="DetailMainImage">
                     <figure class="DetailMainImage__fig">
         

From 3f5bdbde09b0073cba4396bcf62ae37c3623a8dc Mon Sep 17 00:00:00 2001
From: khadar-yonis <khadar.yonissougal@almaviacx.com>
Date: Wed, 15 Jun 2022 16:47:41 +0200
Subject: [PATCH 2/2] (front react) : added placeholder image

---
 package.json                                  |  1 +
 .../js/Collection/CollectionGridItem.jsx      | 23 +++++++++------
 resources/assets/js/Detail/MainImage.jsx      | 28 +++++++++++--------
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/package.json b/package.json
index 534e8eb97..c7b018d24 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "react-loading-image": "^0.5.0",
     "react-modal2": "^5.0.0",
     "react-nl2br": "^0.4.0",
+    "react-placeholder-image": "^0.1.8",
     "react-router-dom": "^4.3.1",
     "react-router-scroll-memory": "^2.0.3",
     "react-textarea-autosize": "^7.1.0",
diff --git a/resources/assets/js/Collection/CollectionGridItem.jsx b/resources/assets/js/Collection/CollectionGridItem.jsx
index 4b1cd1131..08093a6ce 100644
--- a/resources/assets/js/Collection/CollectionGridItem.jsx
+++ b/resources/assets/js/Collection/CollectionGridItem.jsx
@@ -5,6 +5,8 @@ import classNames from "classnames";
 import Heart from "../icons/Heart";
 import RemoveButton from "../ui/RemoveButton";
 
+import { CustomPlaceholder } from "react-placeholder-image"
+
 export default function CollectionGridItem({
   onObjectClick,
   onSelectionClick,
@@ -58,15 +60,18 @@ export default function CollectionGridItem({
             "--aspect-ratio": datum.images[0].width / datum.images[0].height
           }}
         >
-          <img
-            sizes="(min-width: 1800px) calc((100vw - 288px - (40px * 6)) / 6),
-                       (min-width: 1600px) and (max-width: 1799px) calc((100vw - 288px - (40px * 5)) / 5),
-                       (min-width: 1440px) and (max-width: 1599px) calc((100vw - 288px - (40px * 4)) / 4),
-                       (min-width: 1025px) and (max-width: 1439px) calc((100vw - 288px - (40px * 3)) / 3),
-                       (min-width: 800px) and (max-width: 1024px) calc((100vw - (40px * 4)) / 3),
-                       calc(100vw - (3 * 15px) / 2)"
-            srcSet={`${img330} 330w, ${img600} 600w`}
-          />
+          {/*<img*/}
+          {/*  sizes="(min-width: 1800px) calc((100vw - 288px - (40px * 6)) / 6),*/}
+          {/*             (min-width: 1600px) and (max-width: 1799px) calc((100vw - 288px - (40px * 5)) / 5),*/}
+          {/*             (min-width: 1440px) and (max-width: 1599px) calc((100vw - 288px - (40px * 4)) / 4),*/}
+          {/*             (min-width: 1025px) and (max-width: 1439px) calc((100vw - 288px - (40px * 3)) / 3),*/}
+          {/*             (min-width: 800px) and (max-width: 1024px) calc((100vw - (40px * 4)) / 3),*/}
+          {/*             calc(100vw - (3 * 15px) / 2)"*/}
+          {/*  srcSet={`${img330} 330w, ${img600} 600w`}*/}
+          {/*/>*/}
+
+          <CustomPlaceholder width={datum.images[0].width} height={datum.images[0].height}/>
+
           {/* <img
                 sizes="(min-width: 1800px) calc((100vw - 288px - (40px * 6)) / 6),
                        (min-width: 1600px) and (max-width: 1799px) calc((100vw - 288px - (40px * 5)) / 5),
diff --git a/resources/assets/js/Detail/MainImage.jsx b/resources/assets/js/Detail/MainImage.jsx
index cf15bbd3d..8f20bb98b 100644
--- a/resources/assets/js/Detail/MainImage.jsx
+++ b/resources/assets/js/Detail/MainImage.jsx
@@ -7,6 +7,8 @@ import Download from "../icons/Download";
 import Heart from "../icons/Heart";
 import Loader from "../Loader";
 
+import { CustomPlaceholder } from "react-placeholder-image"
+
 class MainImage extends Component {
   constructor(props) {
     super(props);
@@ -36,18 +38,18 @@ class MainImage extends Component {
       <section className="DetailMainImage">
         {this.props.image ? (
           <figure className="DetailMainImage__fig">
-            <ImageLoader
-              src={imgUrl}
-              alt=""
-              image={props => (
-                <Link to={`${this.props.match.url}/zoom`}>
-                  <img src={imgUrl} alt="" className="DetailMainImage__img" />
-                </Link>
-              )}
-              loading={() => <Loader className="DetailMainImage__spinner" />}
-              error={() => <div>Error</div>}
-              className="DetailMainImage__img"
-            />
+            {/*<ImageLoader*/}
+            {/*  src={imgUrl}*/}
+            {/*  alt=""*/}
+            {/*  image={props => (*/}
+            {/*    <Link to={`${this.props.match.url}/zoom`}>*/}
+            {/*      <img src={imgUrl} alt="" className="DetailMainImage__img" />*/}
+            {/*    </Link>*/}
+            {/*  )}*/}
+            {/*  loading={() => <Loader className="DetailMainImage__spinner" />}*/}
+            {/*  error={() => <div>Error</div>}*/}
+            {/*  className="DetailMainImage__img"*/}
+            {/*/>*/}
 
             {this.props.onSelectionClick && (
               <div
@@ -58,6 +60,8 @@ class MainImage extends Component {
                 }}
               >
                 <div>
+                  <CustomPlaceholder width={this.props.image.width} height={this.props.image.height} className="DetailMainImage__img"/>
+
                   <button
                     type="button"
                     className="DetailMainImage__button DetailMainImage__button--selection"