通用加载组件

package-lock.json

@@ -3821,17 +3821,6 @@
         "elliptic": "^6.0.0"
       }
     },
-    "create-emotion": {
-      "version": "10.0.9",
-      "resolved": "https://registry.npmjs.org/create-emotion/-/create-emotion-10.0.9.tgz",
-      "integrity": "sha512-sLKD4bIiTs8PpEqr5vlCoV5lsYE4QOBYEUWaD0R+VGRMCvBKHmYlvLJXsL99Kdc4YEFAFwipi2bbncnvv6UxRg==",
-      "requires": {
-        "@emotion/cache": "^10.0.9",
-        "@emotion/serialize": "^0.11.6",
-        "@emotion/sheet": "0.9.2",
-        "@emotion/utils": "0.11.1"
-      }
-    },
     "create-hash": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/create-hash/-/create-hash-1.2.0.tgz",
@@ -4688,15 +4677,6 @@
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
-    "emotion": {
-      "version": "10.0.9",
-      "resolved": "https://registry.npmjs.org/emotion/-/emotion-10.0.9.tgz",
-      "integrity": "sha512-IMFwwWlU2TDt7eh4v6dm58E8VHAYOitqRbVoazQdxIu9/0CAH4a3UrTMnZSlWQAo09MrRRlKfgQFHswnj40meQ==",
-      "requires": {
-        "babel-plugin-emotion": "^10.0.9",
-        "create-emotion": "^10.0.9"
-      }
-    },
     "encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",

package.json

@@ -22,7 +22,6 @@
     "date-fns": "^1.30.1",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",
-    "emotion": "^10.0.9",
     "eslint": "5.12.0",
     "eslint-config-react-app": "^3.0.8",
     "eslint-loader": "2.1.1",

src/common/Loading/index.js

 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'
 import { HashLoader } from "react-spinners";
-import { css } from 'emotion'
 import './loading.scss'
 
-const override = css({
-    display: 'block',
-    marginTop: '-100px'
-})
 
-const container = document.documentElement || document.body
+const container = document.body
 
 class Loading extends Component {
 
     static defaultProps = {
-        isLoading: true,
-        text: '加载中'
+        text: '加载中',
+        fake: 0
+    }
+
+    state = {
+        isLoading: true
+    }
+
+    componentDidUpdate(prevProps) {
+        let {isLoading, fake} = this.props
+        if (!isLoading) {
+            if(fake){
+                setTimeout(() => {
+                    this.setState({
+                        isLoading
+                    })
+                }, fake)
+            }else {
+                if(prevProps.isLoading != isLoading){
+                    this.setState({
+                        isLoading
+                    })
+                }
+            }
+        }
     }
 
     render() {
@@ -23,7 +41,10 @@ class Loading extends Component {
             <div className="loading">
                 <div className="loading-wrapper">
                     <HashLoader
-                        css={override}
+                        css={{
+                            display: 'block',
+                            marginTop: '-100px'
+                        }}
                         size={50}
                         color={'#09f'}
                     />
@@ -32,7 +53,7 @@ class Loading extends Component {
             </div>
 
         return (
-            this.props.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children
+            this.state.isLoading ? ReactDOM.createPortal(innerLoading, container) : this.props.children
         );
     }
 }

src/components/search/index.js

@@ -4,6 +4,7 @@ import Tag from '@common/Tag/index.js'
 import { http, api } from '@/utils'
 import './index.scss';
 import { Link } from 'react-router-dom'
+import Loading from '@/common/Loading'
 
 
 class Search extends PureComponent {
@@ -12,14 +13,16 @@ class Search extends PureComponent {
         searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
         hot_words: [],
         searchList: [],
-        value: ''
+        value: '',
+        isLoading: true
     }
 
     async componentDidMount() {
         const res = await http.get(`${api['search-api']}/search_hot_word`)
         if (res.data.errno === 0) {
             this.setState({
-                hot_words: res.data.data.info.hot_words
+                hot_words: res.data.data.info.hot_words,
+                isLoading: false
             })
         }
     }
@@ -54,6 +57,7 @@ class Search extends PureComponent {
                     handleChange={this.handleChange}
                     handleSearch={this.handleSearch}
                 />
+                <Loading isLoading={this.state.isLoading}>
                     <div className="search-main">
                         <div className="search-land">
                             <div className='search-history'>
@@ -99,6 +103,7 @@ class Search extends PureComponent {
                             </div>
                         </div>
                     </div>
+                </Loading>
 
             </div>
         )

src/router/router-config.js

@@ -19,6 +19,7 @@ import Passport from '@/components/passport';
 import { Scholarship } from '@/components/scholarship/index';
 import DrawDocument from '@/components/scholarship/DrawDocument/DrawDocument';
 import PayOrder from '@/components/order/payOrder/PayOrder'
+import Loading from '@/common/Loading'
 
 const Coupons = loadable(() => import(/* webpackChunkName: 'coupons'*/ '@/components/coupons'))
 const Study = loadable(() => import(/* webpackChunkName: 'study'*/'@/components/study'))
@@ -137,5 +138,9 @@ export default [
         component: ToGroup,
         isPrivate: true
     },
+    {
+        path: '/loading',
+        component: Loading,
+    },
 
 ]
\ No newline at end of file