From 6c784914824e859e4cdf5c06c1ae89e79363b251 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 21 Oct 2019 17:00:46 +0530
Subject: [PATCH] Add loading animation to filter & lifecycle components in
 APPM

---
 .../components/apps/list-apps/appsTable/AppsTable.js |  8 +++++---
 .../components/apps/release/lifeCycle/LifeCycle.js   | 12 ++++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
index aae593fb2a..24e43a89c6 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
+++ b/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 => {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
index 3230939c72..34384f7f24 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js
+++ b/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