feat: loading组件添加nprogress进度条

Author: NLRX-WJC

package.json

@@ -22,6 +22,7 @@
     "jszip": "^3.4.0",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
+    "nprogress": "^0.2.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-beautiful-dnd": "^13.0.0",

src/components/Loading/index.jsx

@@ -1,11 +1,24 @@
-import React from "react";
+import React, { Component } from "react";
 import { Spin } from "antd";
-const Loading = () => {
-  return (
-    <div className="app-container">
-      <Spin />
-    </div>
-  );
-};
+import NProgress from "nprogress"; // progress bar
+import "nprogress/nprogress.css"; // progress bar style
+
+NProgress.configure({ showSpinner: false })// NProgress Configuration
+
+class Loading extends Component {
+  componentDidMount() {
+    NProgress.start()
+  }
+  componentWillUnmount() {
+    NProgress.done()
+  }
+  render() {
+    return (
+      <div className="app-container">
+        <Spin />
+      </div>
+    );
+  }
+}
 
 export default Loading;