fix(zestyimage): lazyload images

zesty-io · Nov 3, 2023 · 7d6d49a · 7d6d49a
1 parent 89e13d9
commit 7d6d49a
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 22 deletions.
diff --git a/src/blocks/Image/ZestyImage.js b/src/blocks/Image/ZestyImage.js
@@ -1,4 +1,5 @@
 import FillerContent from 'components/globals/FillerContent';
+import { LazyLoadImage } from 'react-lazy-load-image-component';
 
 /**
  *
@@ -20,7 +21,7 @@ const ZestyImage = ({
   options = {},
   src,
   alt,
-  loading = 'eager',
+  loading = 'lazy',
   style = {},
   attributes = {},
 }) => {
@@ -42,7 +43,8 @@ const ZestyImage = ({
   );
 
   return (
-    <img
+    <LazyLoadImage
+      effect='blur'
       width={width}
       height={height}
       {...attributes}

diff --git a/src/layouts/Main/components/Footer/FooterDynamic.js b/src/layouts/Main/components/Footer/FooterDynamic.js
@@ -9,6 +9,7 @@ const Index = (props) => {
   const { ref, inView } = useInView({
     triggerOnce: true,
     threshold: 0,
+    rootMargin: '500px',
   });
   return <div ref={ref}>{inView && <Child {...props} />}</div>;
 };

diff --git a/src/layouts/Main/components/Topbar/components/NavItem/NavItem.js b/src/layouts/Main/components/Topbar/components/NavItem/NavItem.js
@@ -102,27 +102,29 @@ const NavItem = ({ navHandler, activeNav, id, route, colorInvert = false }) => {
           }}
         >
           {/* Grid container that holds left and rigt column of the flyout navigation*/}
-          <Grid sx={{ minHeight: 495 }} container>
-            <Grid
-              sx={{ p: 5, background: theme.palette.background.smokeWhite }}
-              item
-              sm={12}
-              md={7}
-            >
-              <LeftGridLinks route={route} />
+          {activeNav?.isActive && (
+            <Grid sx={{ minHeight: 495 }} container>
+              <Grid
+                sx={{ p: 5, background: theme.palette.background.smokeWhite }}
+                item
+                sm={12}
+                md={7}
+              >
+                <LeftGridLinks route={route} />
+              </Grid>
+              <Grid
+                sx={{
+                  p: 5,
+                  borderLeft: `1px solid ${theme.palette.background.smokeWhiteLevel2}`,
+                }}
+                item
+                sm={12}
+                md={5}
+              >
+                <RightGridLinks route={route} />
+              </Grid>
             </Grid>
-            <Grid
-              sx={{
-                p: 5,
-                borderLeft: `1px solid ${theme.palette.background.smokeWhiteLevel2}`,
-              }}
-              item
-              sm={12}
-              md={5}
-            >
-              <RightGridLinks route={route} />
-            </Grid>
-          </Grid>
+          )}
         </Card>
       </Grow>
     </Box>