Add loading animation when installing/uninstall app in APPM store

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon} from "antd";
+import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon, Spin} from "antd";
 import "../../../App.css";
 import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
@@ -126,17 +126,18 @@ class ReleaseView extends React.Component {
             </Menu>
         );
 
-
         return (
             <div>
                 <AppInstallModal
                     uuid={release.uuid}
+                    loading={this.state.loading}
                     visible={this.state.appInstallModalVisible}
                     deviceType={deviceType}
                     onClose={this.closeAppOperationModal}
                     onInstall={this.appOperation}/>
                 <AppUninstallModal
                     uuid={release.uuid}
+                    loading={this.state.loading}
                     visible={this.state.appUninstallModalVisible}
                     deviceType={deviceType}
                     onClose={this.closeAppOperationModal}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppInstallModal.js

@@ -17,18 +17,19 @@
  */
 
 import React from "react";
-import {Modal, Tabs} from "antd";
+import {Modal, Spin, Tabs} from "antd";
 import UserInstall from "./UserInstall";
 import GroupInstall from "./GroupInstall";
 import RoleInstall from "./RoleInstall";
 import DeviceInstall from "./DeviceInstall";
 
-const { TabPane } = Tabs;
+const {TabPane} = Tabs;
 
-class AppInstallModal extends React.Component{
-    state={
-        data:[]
+class AppInstallModal extends React.Component {
+    state = {
+        data: []
     };
+
     render() {
         const {deviceType} = this.props;
         return (
@@ -37,8 +38,8 @@ class AppInstallModal extends React.Component{
                     title="Install App"
                     visible={this.props.visible}
                     onCancel={this.props.onClose}
-                    footer={null}
-                >
+                    footer={null}>
+                    <Spin spinning={this.props.loading}>
                         <Tabs defaultActiveKey="device">
                             <TabPane tab="Device" key="device">
                                 <DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/>
@@ -53,6 +54,7 @@ class AppInstallModal extends React.Component{
                                 <GroupInstall onInstall={this.props.onInstall}/>
                             </TabPane>
                         </Tabs>
+                    </Spin>
                 </Modal>
             </div>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/AppUninstallModal.js

@@ -16,18 +16,19 @@
  * under the License.
  */
 import React from "react";
-import {Modal, Tabs} from "antd";
+import {Modal, Spin, Tabs} from "antd";
 import DeviceUninstall from "./DeviceUninstall";
 import UserUninstall from "./UserUninstall";
 import RoleUninstall from "./RoleUninstall";
 import GroupUninstall from "./GroupUninstall";
 
-const { TabPane } = Tabs;
+const {TabPane} = Tabs;
 
-class AppUninstallModal extends React.Component{
-    state={
-        data:[]
+class AppUninstallModal extends React.Component {
+    state = {
+        data: []
     };
+
     render() {
         const {deviceType} = this.props;
         return (
@@ -36,11 +37,12 @@ class AppUninstallModal extends React.Component{
                     title="Uninstall App"
                     visible={this.props.visible}
                     onCancel={this.props.onClose}
-                            footer={null}
-                    >
+                    footer={null}>
+                    <Spin spinning={this.props.loading}>
                         <Tabs defaultActiveKey="device">
                             <TabPane tab="Device" key="device">
-                                <DeviceUninstall deviceType={deviceType} onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
+                                <DeviceUninstall deviceType={deviceType} onUninstall={this.props.onUninstall}
+                                                 uuid={this.props.uuid}/>
                             </TabPane>
                             <TabPane tab="User" key="user">
                                 <UserUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
@@ -52,6 +54,7 @@ class AppUninstallModal extends React.Component{
                                 <GroupUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
                             </TabPane>
                         </Tabs>
+                    </Spin>
                 </Modal>
             </div>
         );