From 0864ca849fac91288c6afd3127ad30ebf824848c Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Tue, 12 Dec 2017 13:07:18 -0800
Subject: [PATCH] Use throbber in Standalone layout; center loading messages
 and content

---
 src/standalone/layout.jsx | 10 ++++++++--
 src/style/_layout.scss    |  4 ++++
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/standalone/layout.jsx b/src/standalone/layout.jsx
index dc36b46e..9ad2aace 100644
--- a/src/standalone/layout.jsx
+++ b/src/standalone/layout.jsx
@@ -1,3 +1,5 @@
+
+
 import React from "react"
 import PropTypes from "prop-types"
 
@@ -32,12 +34,16 @@ export default class StandaloneLayout extends React.Component {
         { Topbar ? <Topbar /> : null }
         { loadingStatus === "loading" &&
           <div className="info">
-            <h4 className="title">Loading...</h4>
+            <div className="loading-container">
+              <div className="loading"></div>
+            </div>
           </div>
         }
         { loadingStatus === "failed" &&
           <div className="info">
-            <h4 className="title">Failed to load spec.</h4>
+            <div className="loading-container">
+              <h4 className="title">Failed to load spec.</h4>
+            </div>
           </div>
         }
         { loadingStatus === "failedConfig" &&
diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 1d399f76..3fcf2b0a 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -653,6 +653,10 @@
 .loading-container
 {
     padding: 40px 0 60px;
+    min-height: 1px;
+    display: flex;
+    justify-content: center;
+
     .loading
     {
         position: relative;