feat(lazycomponent): create useLazy hook

replace <LazyComponent /> with useLazy on <Header /> when using <Sidebar />
aneurysmjs · Aug 4, 2019 · f6f7131 · f6f7131
1 parent caed285
commit f6f7131
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 11 deletions.
diff --git a/src/app/components/core/Header/Header.js b/src/app/components/core/Header/Header.js
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 
 import Icon from '@/components/base/Icon/Icon';
 import Navigation from '@/components/core/Navigation/Navigation';
-import Sidebar from '@/components/shared/Sidebar/Sidebar';
+import { useLazy } from '@/components/shared/LazyComponent/LazyComponent';
 
 import './Header.scss';
 
@@ -12,18 +12,26 @@ const Header = () => {
 
   const handleOpen = () => setOpen(!open);
 
+  const Sidebar = useLazy(
+    () => import(/* webpackChunkName: "Sidebar" */'@/components/shared/Sidebar/Sidebar'),
+    open,
+  );
+
   return (
     <div className="header">
-      <Sidebar
-        isOpen={open}
-        onClose={handleOpen}
-        title="Cart"
-        side="right"
-      >
-        <p className="lead">
-          You have nothing, let&apos;s shop!
-        </p>
-      </Sidebar>
+      {Sidebar
+        ? (
+          <Sidebar
+            title="Cart"
+            side="right"
+            isOpen={open}
+            onClose={handleOpen}
+          >
+            <p className="lead">
+              You have nothing, let&apos;s shop!
+            </p>
+          </Sidebar>)
+        : null}
       <Navigation />
       <div className="header__user-menu">
         <span

diff --git a/src/app/components/shared/LazyComponent/LazyComponent.js b/src/app/components/shared/LazyComponent/LazyComponent.js
@@ -30,3 +30,26 @@ const LazyComponent = ({ getModule, ...rest }: PropsType) => {
 };
 
 export default LazyComponent;
+
+export const useLazy = (
+  getModule: () => Promise<*>,
+  cond?: boolean = false,
+) => {
+  const [AsyncModule, setAsyncModule] = useState(null);
+  useEffect(() => {
+    (async () => {
+      try {
+        if (!cond) {
+          return;
+        }
+        const module = await getModule();
+        setAsyncModule(() => module.default);
+      } catch (err) {
+        throw new Error(`LazyComponent error: ${err}`);
+      }
+    })();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cond]);
+
+  return AsyncModule;
+};