diff --git a/src/components/ManagerPage/AppsList.js b/src/components/ManagerPage/AppsList.js index c7b5e833..d67fbde2 100644 --- a/src/components/ManagerPage/AppsList.js +++ b/src/components/ManagerPage/AppsList.js @@ -18,6 +18,7 @@ import installApp from 'commands/installApp' import uninstallApp from 'commands/uninstallApp' import Box from 'components/base/Box' +import Space from 'components/base/Space' import Modal, { ModalBody, ModalFooter, ModalTitle, ModalContent } from 'components/base/Modal' import Tooltip from 'components/base/Tooltip' import Text from 'components/base/Text' @@ -32,7 +33,7 @@ import Update from 'icons/Update' import Trash from 'icons/Trash' import CheckCircle from 'icons/CheckCircle' -import ManagerApp from './ManagerApp' +import ManagerApp, { Container as FakeManagerAppContainer } from './ManagerApp' import AppSearchBar from './AppSearchBar' const mapStateToProps = state => ({ @@ -69,6 +70,20 @@ type State = { mode: Mode, } +const LoadingApp = () => ( + + + +) + +const loadingApp = + class AppsList extends PureComponent { state = { status: 'loading', @@ -242,7 +257,7 @@ class AppsList extends PureComponent { renderList() { const { filteredAppVersionsList, appsLoaded } = this.state - return appsLoaded ? ( + return ( {items => ( @@ -261,10 +276,22 @@ class AppsList extends PureComponent { )} {this.renderModal()} - - ) : ( - - + {!appsLoaded && ( + + + + {loadingApp} + {loadingApp} + {loadingApp} + {loadingApp} + {loadingApp} + {loadingApp} + {loadingApp} + {loadingApp} + {loadingApp} + + + )} ) } diff --git a/src/components/ManagerPage/ManagerApp.js b/src/components/ManagerPage/ManagerApp.js index 410c4044..7661e3ab 100644 --- a/src/components/ManagerPage/ManagerApp.js +++ b/src/components/ManagerPage/ManagerApp.js @@ -12,17 +12,17 @@ import Box from 'components/base/Box' import Text from 'components/base/Text' import Button from 'components/base/Button' -const Container = styled(Box).attrs({ +export const Container = styled(Box).attrs({ horizontal: true, my: 2, mx: 3, p: 4, - boxShadow: 0, + bg: 'white', + boxShadow: p => (p.noShadow ? -1 : 0), borderRadius: 4, flow: 2, })` width: calc(50% - 30px); - background: white; line-height: normal; `