Add loading animation to filter & lifecycle components in APPM

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js

@@ -123,7 +123,8 @@ class AppsTable extends React.Component {
             filters: {},
             isDrawerVisible: false,
             selectedApp: null,
-            selectedAppIndex: -1
+            selectedAppIndex: -1,
+            loading: false
         };
         config = this.props.context;
     }
@@ -222,14 +223,14 @@ class AppsTable extends React.Component {
 
     onUpdateApp = (key, value) => {
         const apps = [...this.state.apps];
-        apps[this.state.selectedAppIndex][key]= value;
+        apps[this.state.selectedAppIndex][key] = value;
         this.setState({
             apps
         });
     };
 
     render() {
-        const {isDrawerVisible} = this.state;
+        const {isDrawerVisible, loading} = this.state;
         return (
             <div className="apps-table">
                 <Table
@@ -239,6 +240,7 @@ class AppsTable extends React.Component {
                     pagination={this.state.pagination}
                     onChange={this.handleTableChange}
                     rowClassName="app-row"
+                    loading={loading}
                     onRow={(record, rowIndex) => {
                         return {
                             onClick: event => {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js

@@ -132,7 +132,7 @@ class LifeCycle extends React.Component {
 
 
     render() {
-        const {currentStatus, selectedStatus} = this.state;
+        const {currentStatus, selectedStatus, isConfirmButtonLoading} = this.state;
         const {lifecycle} = this.props;
         const selectedValue = selectedStatus == null ? [] : selectedStatus;
         let proceedingStates = [];
@@ -180,21 +180,17 @@ class LifeCycle extends React.Component {
                     type="primary"
                     htmlType="button"
                     onClick={this.showReasonModal}
-                    disabled={selectedStatus == null}
+                    loading={isConfirmButtonLoading}
-                >
+                    disabled={selectedStatus == null}>
                     Change
                 </Button>
-
-
                 <Divider/>
-
                 <Modal
                     title="Confirm changing lifecycle state"
                     visible={this.state.isReasonModalVisible}
                     onOk={this.addLifeCycle}
                     onCancel={this.closeReasonModal}
-                    okText="Confirm"
+                    okText="Confirm">
-                >
                     <Text>
                         You are going to change the lifecycle state from,<br/>
                         <Tag color="blue">{currentStatus}</Tag>to <Tag