STEP 8 - Lazy components

client/components/Footer/Lazy.js

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import loadable from '@loadable/component';
+import useIntersect from '@jackyef/use-intersect';
+
+const LazyFooterComponent = loadable(() => import(/* webpackChunkName: "footer" */ './index'));
+
+const FooterLoader = () => {
+  return (
+    <div style={{ padding: '2em', minHeight: '330px' }}>
+      <h2>Sedang memuat...</h2>
+    </div>
+  );
+};
+
+const optionsData = {
+  root: null,
+  rootMargin: '0px',
+  threshold: [0, 0, 0, 0],
+};
+
+const FooterWrapper = () => {
+  const [loaded, setLoaded] = useState(false);
+
+  const onIntersect = () => {
+		console.debug('Footer is intersecting!');
+    setLoaded(true);
+  };
+
+  const targetRef = useIntersect(onIntersect, optionsData, true);
+
+  return <div ref={targetRef}>{loaded ? <LazyFooterComponent /> : <FooterLoader />}</div>;
+};
+
+export default FooterWrapper;

client/routes/Home/components/index.js

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 import Header from '../../../components/Header';
 import RatingReview from '../../../components/RatingReview';
 import LazyImage from '../../../components/LazyImage';
-import Footer from '../../../components/Footer';
+import LazyFooter from '../../../components/Footer/Lazy';
 
 const productWrapper = {
   display: 'flex',
@@ -83,7 +83,7 @@ function Home() {
           </div>
         )}
       </main>
-      <Footer />
+      <LazyFooter />
     </div>
   );
 }