refactor(chart): lazy load Chart.js with suspense

- chore: add ico favicon
- chore: lint
- chore: add react-hooks lint rules

5 files changed, 47 insertions, 52 deletions

diff --git a/src/components/Home.js b/src/components/Home.js
index cf417a4..57f6c6f 100644
--- a/src/components/Home.js
+++ b/src/components/Home.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 
 import ContentHeader from 'c/ContentHeader';
 import TrafficChart from 'c/TrafficChart';
 import TrafficNow from 'c/TrafficNow';
+import Loading from 'c/Loading';
 import s0 from 'c/Home.module.scss';
 
 export default function Home() {
@@ -14,7 +15,9 @@ export default function Home() {
           <TrafficNow />
         </div>
         <div className={s0.chart}>
-          <TrafficChart />
+          <Suspense fallback={<Loading height="200px" />} maxDuration={10}>
+            <TrafficChart />
+          </Suspense>
         </div>
       </div>
     </div>
diff --git a/src/components/Loading.js b/src/components/Loading.js
index 1b8d373..7949a4b 100644
--- a/src/components/Loading.js
+++ b/src/components/Loading.js
@@ -1,14 +1,19 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-import style from './Loading.module.scss';
+import s0 from './Loading.module.scss';
 
-const Loading = () => {
+const Loading = ({ height }) => {
+  const style = height ? { height } : {};
   return (
-    <div className={style.loading}>
-      <div className={style.left + ' ' + style.circle} />
-      <div className={style.right + ' ' + style.circle} />
+    <div className={s0.loading} style={style}>
+      <div className={s0.pulse} />
     </div>
   );
 };
 
+Loading.propTypes = {
+  height: PropTypes.string
+};
+
 export default Loading;
diff --git a/src/components/Loading.module.scss b/src/components/Loading.module.scss
index 7166140..05f8f3f 100644
--- a/src/components/Loading.module.scss
+++ b/src/components/Loading.module.scss
@@ -1,50 +1,31 @@
-$color1: #2a477a;
-$color2: #dddddd;
+// $color1: #2a477a;
+$color1: #dddddd;
 
-@keyframes moveRight {
-  0% {
-    transform: translate(-50px);
-  }
-
-  100% {
-    transform: translate(10px);
-  }
-}
-
-@keyframes moveLeft {
-  0% {
-    transform: translate(50px);
-  }
-
-  100% {
-    transform: translate(-10px);
-  }
-}
+$size: 40px;
 
 .loading {
-  position: relative;
   width: 100%;
-  height: 300px;
-  margin: 0 auto;
-  height: 30vh;
-}
-
-.circle {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  position: absolute;
-  top: 50%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.left {
+.pulse {
+  width: $size;
+  height: $size;
+  margin: 10px;
   background-color: $color1;
-  left: 50%;
-  animation: moveRight 1s ease-in-out 0s infinite alternate;
+  border-radius: 100%;
+  animation: pulseScaleOut 1s infinite ease-in-out;
 }
 
-.right {
-  background-color: $color2;
-  right: 50%;
-  animation: moveLeft 1s ease-in-out 0s infinite alternate;
+@keyframes pulseScaleOut {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
 }
diff --git a/src/components/Logs.js b/src/components/Logs.js
index 74cdb33..235e7ba 100644
--- a/src/components/Logs.js
+++ b/src/components/Logs.js
@@ -47,7 +47,7 @@ export default function Logs() {
     const x = fetchLogs();
     setLogs(x.logs);
     return x.subscribe(() => setLogs(x.logs));
-  });
+  }, []);
 
   return (
     <div>
diff --git a/src/components/TrafficChart.js b/src/components/TrafficChart.js
index f625d90..4bfb4a7 100644
--- a/src/components/TrafficChart.js
+++ b/src/components/TrafficChart.js
@@ -1,8 +1,12 @@
 import React, { useEffect } from 'react';
-import Chart from 'chart.js/dist/Chart.min.js';
 import prettyBytes from 'm/pretty-bytes';
-
 import { fetchData } from '../api/traffic';
+import { unstable_createResource as createResource } from 'react-cache';
+
+// const delay = ms => new Promise(r => setTimeout(r, ms));
+const chartJSResource = createResource(() => {
+  return import('chart.js/dist/Chart.min.js').then(c => c.default);
+});
 
 const colorCombo = {
   0: {
@@ -108,13 +112,15 @@ const options = {
 };
 
 const chartWrapperStyle = {
+  // make chartjs chart responsive
   position: 'relative',
   width: '90%'
 };
 
 export default function TrafficChart() {
+  const Chart = chartJSResource.read();
   useEffect(() => {
-    const ctx = document.getElementById('myChart').getContext('2d');
+    const ctx = document.getElementById('trafficChart').getContext('2d');
     const traffic = fetchData();
     const data = {
       labels: traffic.labels,
@@ -139,7 +145,7 @@ export default function TrafficChart() {
 
   return (
     <div style={chartWrapperStyle}>
-      <canvas id="myChart" />
+      <canvas id="trafficChart" />
     </div>
   );
 }