lazyload bg img on footer also

src/helpers/index.js

@@ -1,2 +1,3 @@
 export useClickOutside from './useClickOutside';
 export usePrevious from './usePrevious';
+export useOnScreen from './useOnScreen';

src/helpers/useOnScreen.js

@@ -0,0 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React from 'react';
+
+function useOnScreen(ref, rootMargin = '0px') {
+  // State and setter for storing whether element is visible
+  const [isIntersecting, setIntersecting] = React.useState(false);
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        // Update our state when observer callback fires
+        setIntersecting(entry.isIntersecting);
+      },
+      {
+        rootMargin,
+      },
+    );
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+    return () => {
+      observer.unobserve(ref.current);
+    };
+  }, []); // Empty array ensures that effect is only run on mount and unmount
+  return isIntersecting;
+}
+
+export { useOnScreen };

src/ui/Footer/Footer.jsx

@@ -12,6 +12,7 @@ import FooterHeader from '@eeacms/volto-eea-design-system/ui/Footer/FooterHeader
 import SubFooter from '@eeacms/volto-eea-design-system/ui/Footer/SubFooter';
 import Social from '@eeacms/volto-eea-design-system/ui/Footer/Social';
 import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
+import { useOnScreen } from '../../helpers/useOnScreen';
 
 /**
  * Component to display the footer.
@@ -22,9 +23,15 @@ import Contact from '@eeacms/volto-eea-design-system/ui/Footer/Contact';
 
 const Footer = (props) => {
   const { children } = props;
+
+  const bgImgRef = React.useRef();
+  const onScreen = useOnScreen(bgImgRef, '-10px');
   return (
     <footer id={'footer'}>
-      <div className="footer-wrapper">
+      <div
+        ref={bgImgRef}
+        className={onScreen ? 'footer-wrapper' : 'footer-wrapper-nobg'}
+      >
         <Container>{children}</Container>
       </div>
     </footer>

theme/themes/eea/extras/footer.less

@@ -21,6 +21,10 @@ footer {
     background-position: @wrapperBackgroundPosition;
     background-size: @mobileWrapperBackgroundSize;
   }
+  .footer-wrapper-nobg {
+    width: @wrapperWidth;
+    padding: @mobileWrapperPadding;
+  }
 }
 
 footer .theme-sites {
@@ -201,7 +205,6 @@ footer .footer-wrapper .menu {
       }
     }
   }
-
 }
 
 @media only screen and (min-width: @computerBreakpoint) {