parent 4157021

author Joshua Stephen <[email protected]> 1596075199 +0700
committer Irfan Maulana <[email protected]> 1597045412 +0700
gpgsig -----BEGIN PGP SIGNATURE-----

 iQIzBAABCAAdFiEE9vXkACqy/ABx5tTU81NJKLTGrbsFAl8w+qQACgkQ81NJKLTG
 rbuSPA/8CjQpFoA+1cFkzqmCerq7WqRsT/8hKS6Wr7MUC/8LS62cAglKkrm+1jjr
 bQJZdEEl5YytN8YIRVPwGNZu38Jdh6GaI4JMKJ3X1g+n5v7v2015/CORsOypZ7S4
 Kn2XZmZdteDuszpw69IomJP5q/Sup72jPz5LJ03fiRKDfa25ZG0Fq2ju0G8qFc3R
 W76d32VwKGwOfXg6yF0kT2DRQquQPnCfni1CJ6LmuGJ6lZZwPVZgIXDhhKOqcBbM
 SbcJdcyOMAWsbroWWQ0+Ei3KNN+w7XwJIwADQg+sYFAAtr7/arieUPIFZQi6C+hu
 ZelCQEMJ7RImKBbNct3Hw8JY7O1Je0dEfQ16OPOsEd5II3+mWC+tNRveECDQUFr4
 itgobG7Y37t+TDlNn5lNXRBMWPhNnc4xM/0K2RELURlrECOY6SpeRej0Kdx0Uz2D
 /1/l5+xMfDmcwrPVSFnLkNB9hejx5lvT7beDunomaUpNIUSYd/0OJ+PszWqKALkB
 8imXL1YAdEvI18i0jr+/cIywbFVTheJWQLtXjpgDfzNu/knjUhxclLl8Ez+KDY2w
 n4gRczXU5468tsSRujQRzY6wffu14fNTe02EhoSnJKEaZYBP915lbOURVOK1IF5u
 oRcASDjFM4ehjKFSikojK1e0rMsfWcHRmtDqeJTga3TV6YLpXac=
 =L4FX
 -----END PGP SIGNATURE-----

parent 4157021
author Joshua Stephen <[email protected]> 1596075199 +0700
committer Irfan Maulana <[email protected]> 1597045327 +0700
gpgsig -----BEGIN PGP SIGNATURE-----

 iQIzBAABCAAdFiEE9vXkACqy/ABx5tTU81NJKLTGrbsFAl8w+k8ACgkQ81NJKLTG
 rbvLeRAAlFboJKgdu/GgEx7LKOys0lkM35W9IutkOo761G/PuXicW3esz72S0ZdO
 faMstdceSBUR4+QeALi0j//RtHsEl5pA/2PwdbNKFPrUa+eKH4PXHO4gv1oqd4TO
 OQ9DPOUW+QwertWWgHdWXy1ULVXULaWqUvPV2eXXFlwC12HmXytBElod8KTdGETk
 wAiTv7WJvHHdteLCUJLTMsZRQV4K3zSRnCEzdygFH3E0EB/eqpyGpNhOZOfrrCyl
 zMpCCjBTkmJMeBjejxF3MeAJ/p2Nz4oqfEUoHJHDSWrJ8lNuDoJt08VukgYeaqf/
 c/59IyGqr0L+nJN2O9Q5IJsBsrzqpBI5+ONAmZGCLdVQWsbPqWkwCQI/Z0r7gdWV
 VmCrNYIC+gm3FNw/q7R952NhfmSsUe0GXEDXy3Z+5aQm+6ZXdDHgJ/ydl+E6s79n
 x3LK0KTjDXVUipCqpPTMJoPit/4JIJs5jpcCv9a5jFGmPRqL6SUMjzrAHH0jJDyU
 5OZ1s4iQyDCQ6t4LU/G4QfLQgVaqyXtlNoI8IDklMbFlvuKsL7iiBQOaWU63Bicl
 TP0ttDI2g2a7ilpmo5aY3X7sivyek65qGjDTmPZ9iP+kZIj6XGO2ahUZfNRN15yp
 9OFJYbNtZdZJs3nMfiwoFJqeFIxzMC8StxyLFxNeqZa7yZgkQSI=
 =ieT1
 -----END PGP SIGNATURE-----

feat: add pdp chunk & optimize moment plugin

add lazy image

add lazy

add image ratio

fix: unused changes

fix: remove unused 3rd party

improvement: manual resize image size

improvment: upload image to CDN

feat: add empty lazy image

add lazy image

add lazy

add image ratio

feat: add pdp chunk & optimize moment plugin

feat: add empty lazy image

feat: add pdp chunk & optimize moment plugin

add lazy image

feat: lazy footer

feat: remove unused changes

fix: indentations

feat: use native intersections

Author: josteph

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/components/Footer/index.js

@@ -25,7 +25,7 @@ const Footer = () => {
 	const [showAll, setShowAll] = useState(false);
   const [showData, setShowData] = useState('');
   const disqusInit = useRef();
-  const { data, loading } = useData(`${API_URL}/footer`, {}, { method: 'GET' }, { ssr: true });
+  const { data, loading } = useData(`${API_URL}/footer`, {}, { method: 'GET' }, { ssr: false });
 
 	useEffect(() => {
 		if (!loading && data) {

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>
   );
 }

client/routes/PDP/index.js

@@ -1,14 +1,9 @@
-import React from 'react';
-import { object } from 'prop-types';
+import loadable from '@loadable/component';
 
-import PdpComponent from './components';
+const errorLoading = err => console.log('PDP page loading failed!', err);
 
-const PDP = ({ match }) => {
-	return (<PdpComponent match={match}/>)
-};
+const PDPComponent = loadable(() =>
+  import(/* webpackChunkName: "pdp" */ './components').catch(errorLoading),
+);
 
-PDP.propTypes = {
-  match: object.isRequired,
-};
-
-export default PDP;
+export default PDPComponent;

tools/client/webpack.config.babel.js

@@ -406,6 +406,8 @@ module.exports = function() {
         color: '#61dafb',
       }),
 
+      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+
       new FriendlyErrorsWebpackPlugin(),
       // Generates an `index.html` or `index.client.html` file with the <script> injected.
       new HtmlWebpackPlugin(