From 391267d6092dfea9965f3247b1e816c3de4c1017 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Fri, 28 Jul 2017 15:24:41 +0100
Subject: [PATCH] feat(cp-frontend): show diff loading msg when provisioning

---
 packages/cp-frontend/package.json             |  1 +
 .../src/components/layout/container.js        | 11 +++++-
 .../src/components/messaging/loader.js        | 35 ++++++++++++++++---
 3 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json
index e6949b06..9ef224db 100644
--- a/packages/cp-frontend/package.json
+++ b/packages/cp-frontend/package.json
@@ -75,6 +75,7 @@
     "jest-matcher-utils": "^20.0.3",
     "jest-snapshot": "^20.0.3",
     "jest-styled-components": "^4.2.2",
+    "lodash.sortby": "^4.7.0",
     "mz": "^2.6.0",
     "react-scripts": "^1.0.7",
     "react-test-renderer": "^15.6.1",
diff --git a/packages/cp-frontend/src/components/layout/container.js b/packages/cp-frontend/src/components/layout/container.js
index 0b15643b..f0099fe0 100644
--- a/packages/cp-frontend/src/components/layout/container.js
+++ b/packages/cp-frontend/src/components/layout/container.js
@@ -1,6 +1,6 @@
 import { Grid } from 'react-styled-flexboxgrid';
 import remcalc from 'remcalc';
-import { isNot } from 'styled-is';
+import is, { isNot } from 'styled-is';
 
 export default Grid.extend`
   padding-top: ${remcalc(19)};
@@ -10,4 +10,13 @@ export default Grid.extend`
     display: flex;
     flex-flow: column;
   `};
+
+  ${is('center')`
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-content: center;
+    align-items: center;
+  `};
 `;
diff --git a/packages/cp-frontend/src/components/messaging/loader.js b/packages/cp-frontend/src/components/messaging/loader.js
index 56b39190..ff0664d1 100644
--- a/packages/cp-frontend/src/components/messaging/loader.js
+++ b/packages/cp-frontend/src/components/messaging/loader.js
@@ -1,7 +1,34 @@
 import React from 'react';
+import styled from 'styled-components';
 
-import { P } from 'joyent-ui-toolkit';
+import { P, StatusLoader } from 'joyent-ui-toolkit';
 
-export default () => {
-  return <P>Loading...</P>;
-};
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-content: center;
+  align-items: center;
+  flex: 1 1 auto;
+  align-self: stretch;
+`;
+
+const Loader = styled(StatusLoader)`
+  flex: 0 0 auto;
+  align-self: stretch;
+`;
+
+const Msg = P.extend`
+  flex: 0 0 auto;
+  align-self: stretch;
+  text-align: center;
+`;
+
+export default ({ msg }) =>
+  <Container>
+    <Loader />
+    <Msg>
+      {msg || 'Loading...'}
+    </Msg>
+  </Container>;