update: adding loading on shop page

src/common/pages/Items/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {inject, observer} from 'mobx-react';
 import {Link} from 'react-router';
-import { Affix, Card, Slider, Select, Menu } from 'antd';
+import { Affix, Card, Slider, Select, Menu, Spin } from 'antd';
 import {Tab, Tabs} from 'material-ui';
 import './style.scss';
 import All from "./All/index";
@@ -18,6 +18,7 @@ export default class ItemsComponent extends React.Component {
     this.state = {
       valueMinimal: 0,
       valueMaximal: 0,
+      isLoading: false
     };
     this.defaultState = Object.assign({}, this.state);
   }
@@ -54,7 +55,11 @@ export default class ItemsComponent extends React.Component {
           <div className="col l3 m3 s3 no-padding">
             <Affix offsetTop={90}>
               <Card title="Category" bordered={true} style={{ width: '100%' }}>
-                <Menu style={{
+                <Menu onClick={() => {
+                  this.setState({isLoading: true});
+
+                  setTimeout(() => this.setState({isLoading: false}), 2500);
+                }} style={{
                   border: '0px'
                 }} mode="vertical">
                   <SubMenu key="sub1" title={<span><span>Fashion</span></span>}>
@@ -145,7 +150,9 @@ export default class ItemsComponent extends React.Component {
             </Affix>
           </div>
           <div className="col l9 m9 s9 no-padding">
-            <All/>
+            <Spin spinning={this.state.isLoading} delay={500}>
+              <All/>
+            </Spin>
           </div>
         </div>
       </div>