feat: fix a bunch of bugs.

client/src/components/NProgress/Bar.js

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types'
+import * as React from 'react'
+
+const Bar = ({ progress, animationDuration }) => (
+  <div
+    style={{
+      background: '#79b8ff',
+      height: 3,
+      left: 0,
+      marginLeft: `${(-1 + progress) * 100}%`,
+      position: 'fixed',
+      top: 0,
+      transition: `margin-left ${animationDuration}ms linear`,
+      width: '100%',
+      zIndex: 1031,
+    }}
+  >
+    <div
+      style={{
+        boxShadow: '0 0 10px #79b8ff, 0 0 5px #79b8ff',
+        display: 'block',
+        height: '100%',
+        opacity: 1,
+        position: 'absolute',
+        right: 0,
+        transform: 'rotate(3deg) translate(0px, -4px)',
+        width: 100,
+      }}
+    />
+  </div>
+)
+
+Bar.propTypes = {
+  animationDuration: PropTypes.number.isRequired,
+  progress: PropTypes.number.isRequired,
+}
+
+export default Bar;

client/src/components/NProgress/Container.js

@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types'
+import * as React from 'react'
+
+const Container = ({ children, isFinished, animationDuration }) => (
+  <div
+    style={{
+      opacity: isFinished ? 0 : 1,
+      pointerEvents: 'none',
+      transition: `opacity ${animationDuration}ms linear`,
+    }}
+  >
+    {children}
+  </div>
+)
+
+Container.propTypes = {
+  animationDuration: PropTypes.number.isRequired,
+  children: PropTypes.node.isRequired,
+  isFinished: PropTypes.bool.isRequired,
+}
+
+export default Container;

client/src/components/NProgress/Progress.js

@@ -0,0 +1,27 @@
+import { useNProgress } from '@tanem/react-nprogress'
+import PropTypes from 'prop-types'
+import React from 'react'
+import Bar from './Bar'
+import Container from './Container'
+import Spinner from './Spinner'
+
+const Progress = ({
+  isAnimating,
+  minimum = 0.2
+}) => {
+  const { animationDuration, isFinished, progress } = useNProgress({
+    isAnimating, minimum,
+  });
+
+  return (
+    <Container isFinished={isFinished} animationDuration={animationDuration}>
+      <Bar progress={progress} animationDuration={animationDuration} />
+    </Container>
+  )
+}
+
+Progress.propTypes = {
+  isAnimating: PropTypes.bool.isRequired,
+};
+
+export default Progress;

client/src/components/NProgress/Spinner.js

@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+const Spinner = () => (
+  <div
+    style={{
+      display: 'block',
+      position: 'fixed',
+      right: 15,
+      top: 15,
+      zIndex: 1031,
+    }}
+  >
+    <div
+      style={{
+        animation: '400ms linear infinite spinner',
+        borderBottom: '2px solid transparent',
+        borderLeft: '2px solid #29d',
+        borderRadius: '50%',
+        borderRight: '2px solid transparent',
+        borderTop: '2px solid #29d',
+        boxSizing: 'border-box',
+        height: 18,
+        width: 18,
+      }}
+    />
+  </div>
+)
+
+export default Spinner;