lazyload footer images

eea · Feb 20, 2023 · a0633c9 · a0633c9
1 parent 27e1443
commit a0633c9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
   "dependencies": {
     "@eeacms/volto-corsproxy": "*",
     "react-countup": "^6.3.0",
+    "react-lazy-load-image-component": "1.5.6",
     "react-slick": "^0.28.1",
     "remixicon": "2.5.0",
     "slick-carousel": "^1.8.1"

diff --git a/src/ui/Footer/FooterSites.jsx b/src/ui/Footer/FooterSites.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Grid, Image } from 'semantic-ui-react';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
+
 import PropTypes from 'prop-types';
 
 const Sites = (props) => {
@@ -11,10 +13,14 @@ const Sites = (props) => {
       column.push(
         <Grid.Column className="logo" key={i}>
           <a className="logo" href={item.link}>
-            <Image src={item.src} alt={item.alt}></Image>
+            <LazyLoadComponent>
+              <Image src={item.src} alt={item.alt}></Image>
+            </LazyLoadComponent>
           </a>
           <a className="logo" href={nextItem.link}>
-            <Image src={nextItem.src} alt={nextItem.alt}></Image>
+            <LazyLoadComponent>
+              <Image src={nextItem.src} alt={nextItem.alt}></Image>
+            </LazyLoadComponent>
           </a>
         </Grid.Column>,
       );

diff --git a/src/ui/Footer/SubFooter.jsx b/src/ui/Footer/SubFooter.jsx
@@ -2,6 +2,7 @@ import React from 'react';
 import Footer from './Footer';
 
 import { Grid, Image } from 'semantic-ui-react';
+import { LazyLoadComponent } from 'react-lazy-load-image-component';
 
 const SubFooter = (props) => {
   if (props.children) {
@@ -23,7 +24,9 @@ const SubFooter = (props) => {
               <div className="item">
                 <div className={manager.className}>
                   <a href={manager.link}>
-                    <Image src={manager.src} alt={manager.alt}></Image>
+                    <LazyLoadComponent>
+                      <Image src={manager.src} alt={manager.alt}></Image>
+                    </LazyLoadComponent>
                   </a>
                 </div>
               </div>
@@ -53,7 +56,9 @@ const SubFooter = (props) => {
               <div className="item">
                 <div className={manager.className}>
                   <a href={manager.link}>
-                    <Image src={manager.src} alt={manager.alt}></Image>
+                    <LazyLoadComponent>
+                      <Image src={manager.src} alt={manager.alt}></Image>
+                    </LazyLoadComponent>
                   </a>
                 </div>
               </div>