adding lazyload to abous us page images and home page

husseinizaid · Jul 30, 2022 · e7dfbd9 · e7dfbd9
1 parent 10a9a8e
commit e7dfbd9
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/client/src/pages/About/ExecProfile/ExecProfile.jsx b/client/src/pages/About/ExecProfile/ExecProfile.jsx
@@ -1,5 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
+
 import './ExecProfile.scss';
 
 import wave from '../../../assets/about/wave-about.svg';
@@ -25,7 +28,8 @@ const ExecProfile = ({
       className={`exec-container ${subcom ? 'subcom-container' : ''}`}
       onClick={() => setShowDescription(!showDescription)}
     >
-      <img src={image} className="exec-image"></img>
+      <LazyLoadImage className="exec-image" alt={name} effect="blur" src={image}></LazyLoadImage>
+      {/* <img src={image} className="exec-image"></img> */}
       <div
         className={` ${
           showDescription ? 'exec-profile-description-show' : 'exec-profile-description-hide'

diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx
@@ -20,6 +20,8 @@ import { ScheduleComponent } from '../../components/schedule/ScheduleHome/Schedu
 import { PopupModal } from '../../components/popup/PopupModal';
 import { sponsors } from '../../util/sponsors';
 import { DarkModeContext } from '../../util/DarkModeProvider';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
 
 const PageHome = () => {
   return (
@@ -94,7 +96,12 @@ const HomePageSlideshow = () => {
     <Slide {...properties}>
       {getSlideshowImages().map((image, index) => (
         <div key={index}>
-          <img className="home-page-landing-image" src={image} alt={'slideshow' + index} />
+          <LazyLoadImage
+            className="home-page-landing-image"
+            alt={'slideshow' + index}
+            src={image}
+          />
+          {/* <img className="home-page-landing-image" src={image} alt={'slideshow' + index} /> */}
         </div>
       ))}
     </Slide>

diff --git a/package.json b/package.json
@@ -16,6 +16,8 @@
     "lint-staged": "^12.4.1"
   },
   "dependencies": {
-    "concurrently": "^7.1.0"
+    "concurrently": "^7.1.0",
+    "react-lazy-load-image-component": "^1.5.5",
+    "react-lazyload": "^3.2.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -290,6 +290,16 @@ listr2@^4.0.5:
     through "^2.3.8"
     wrap-ansi "^7.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
+
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
+
 lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -374,6 +384,14 @@ pidtree@^0.5.0:
   resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.5.0.tgz#ad5fbc1de78b8a5f99d6fbdd4f6e4eee21d1aca1"
   integrity sha512-9nxspIM7OpZuhBxPg73Zvyq7j1QMPMPsGKTqRc2XOaFQauDvoNz9fM1Wdkjmeo7l9GXOZiRs97sPkuayl39wjA==
 
+react-lazy-load-image-component@^1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.5.tgz#ef6630a4cf5d604d36b0ca808dbe92eca8c81759"
+  integrity sha512-pPtq48tIhkLIZg6MAhB3VvVhntJLrc3MBun/lQkNmNtrRFXdjEc5aHlPT5EhpXPQR1nsNVwN91ne6Aagm3rtNQ==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    lodash.throttle "^4.1.1"
+
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"