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,22 +38,23 @@ class AppInstallModal extends React.Component{
                     title="Install App"
                     visible={this.props.visible}
                     onCancel={this.props.onClose}
-                    footer={null}
-                >
-                    <Tabs defaultActiveKey="device">
-                        <TabPane tab="Device" key="device">
-                            <DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/>
-                        </TabPane>
-                        <TabPane tab="User" key="user">
-                            <UserInstall onInstall={this.props.onInstall}/>
-                        </TabPane>
-                        <TabPane tab="Role" key="role">
-                            <RoleInstall onInstall={this.props.onInstall}/>
-                        </TabPane>
-                        <TabPane tab="Group" key="group">
-                            <GroupInstall onInstall={this.props.onInstall}/>
-                        </TabPane>
-                    </Tabs>
+                    footer={null}>
+                    <Spin spinning={this.props.loading}>
+                        <Tabs defaultActiveKey="device">
+                            <TabPane tab="Device" key="device">
+                                <DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/>
+                            </TabPane>
+                            <TabPane tab="User" key="user">
+                                <UserInstall onInstall={this.props.onInstall}/>
+                            </TabPane>
+                            <TabPane tab="Role" key="role">
+                                <RoleInstall onInstall={this.props.onInstall}/>
+                            </TabPane>
+                            <TabPane tab="Group" key="group">
+                                <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,31 +16,33 @@
  * 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 (
-                <div>
-                    <Modal
-                            title="Uninstall App"
-                            visible={this.props.visible}
-                            onCancel={this.props.onClose}
-                            footer={null}
-                    >
+            <div>
+                <Modal
+                    title="Uninstall App"
+                    visible={this.props.visible}
+                    onCancel={this.props.onClose}
+                    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,8 +54,9 @@ class AppUninstallModal extends React.Component{
                                 <GroupUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
                             </TabPane>
                         </Tabs>
-                    </Modal>
-                </div>
+                    </Spin>
+                </Modal>
+            </div>
         );
     }
 }