Add loading animation when installing/uninstall app in APPM store

feature/appm-store/pbac
Jayasanka Weerasinghe 5 years ago committed by Dharmakeerthi Lasantha
parent 41f53d06c6
commit 78bd339cd4

@ -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}

@ -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>
);

@ -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>
);

Loading…
Cancel
Save