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;
`