From 67b2b716e46310c08474865aa77f1a14eca5f93a Mon Sep 17 00:00:00 2001
From: HelderSepu <HelderSepu@gmail.com>
Date: Sat, 9 Dec 2017 11:12:41 -0500
Subject: [PATCH 1/7] Show loading message when we are loading

---
 src/core/components/layouts/base.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index 1f5a0788..404a16b5 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -61,7 +61,11 @@ export default class BaseLayout extends React.Component {
     const isSpecEmpty = !specSelectors.specStr()
 
     if(isSpecEmpty) {
-      return <h4>No spec provided.</h4>
+      if(isLoading) {
+        return <h4>Loading...</h4>
+      } else {
+        return <h4>No spec provided.</h4>
+      }
     }
 
     return (

From b2a435afdc2cea22e19e1c523fc0d2401c72706e Mon Sep 17 00:00:00 2001
From: Helder Sepulveda <heldersepu@gmail.com>
Date: Tue, 12 Dec 2017 07:41:33 -0500
Subject: [PATCH 2/7] Replace text with Loading throbber

---
 src/core/components/layouts/base.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index 404a16b5..22609d85 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -62,7 +62,7 @@ export default class BaseLayout extends React.Component {
 
     if(isSpecEmpty) {
       if(isLoading) {
-        return <h4>Loading...</h4>
+        return <div class="loading-container"><div class="loading"></div></div>
       } else {
         return <h4>No spec provided.</h4>
       }

From faa9ada6b87c4f622b2a756a12e87c60325869a5 Mon Sep 17 00:00:00 2001
From: kyle <shockey@users.noreply.github.com>
Date: Tue, 12 Dec 2017 12:31:55 -0800
Subject: [PATCH 3/7] `class` => `className`

---
 src/core/components/layouts/base.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index 22609d85..cd4155ac 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -62,7 +62,7 @@ export default class BaseLayout extends React.Component {
 
     if(isSpecEmpty) {
       if(isLoading) {
-        return <div class="loading-container"><div class="loading"></div></div>
+        return <div className="loading-container"><div className="loading"></div></div>
       } else {
         return <h4>No spec provided.</h4>
       }

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 4/7] 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;

From 3db4f6c93a61feefe0354f9f0d85d2095d120d51 Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Tue, 12 Dec 2017 13:24:42 -0800
Subject: [PATCH 5/7] Wrap BaseLayout loading messages in
 swagger-ui+loading-container

---
 src/core/components/layouts/base.jsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index cd4155ac..47f94c1a 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -61,11 +61,18 @@ export default class BaseLayout extends React.Component {
     const isSpecEmpty = !specSelectors.specStr()
 
     if(isSpecEmpty) {
+      let loadingMessage
       if(isLoading) {
-        return <div className="loading-container"><div className="loading"></div></div>
+        loadingMessage = <div className="loading"></div>
       } else {
-        return <h4>No spec provided.</h4>
+        loadingMessage = <h4>No spec provided.</h4>
       }
+
+      return <div className="swagger-ui">
+        <div className="loading-container">
+          {loadingMessage}
+        </div>
+      </div>
     }
 
     return (

From 00f4fb33264f8ae5c1bcd34994c3dc2afee6a5dd Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Tue, 12 Dec 2017 13:25:36 -0800
Subject: [PATCH 6/7] Add margin to loading container

---
 src/style/_layout.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/style/_layout.scss b/src/style/_layout.scss
index 3fcf2b0a..72109a73 100644
--- a/src/style/_layout.scss
+++ b/src/style/_layout.scss
@@ -653,6 +653,7 @@
 .loading-container
 {
     padding: 40px 0 60px;
+    margin-top: 1em;
     min-height: 1px;
     display: flex;
     justify-content: center;

From dfa96e66a4ff89d550fdd35dea795edd0d5654fb Mon Sep 17 00:00:00 2001
From: Kyle Shockey <shockey@users.noreply.github.com>
Date: Tue, 12 Dec 2017 13:31:21 -0800
Subject: [PATCH 7/7] Improve a handful of error surfacing messages

`Spec` => `API definition`, notably.
---
 src/core/components/layouts/base.jsx | 2 +-
 src/standalone/layout.jsx            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx
index 47f94c1a..235366f7 100644
--- a/src/core/components/layouts/base.jsx
+++ b/src/core/components/layouts/base.jsx
@@ -65,7 +65,7 @@ export default class BaseLayout extends React.Component {
       if(isLoading) {
         loadingMessage = <div className="loading"></div>
       } else {
-        loadingMessage = <h4>No spec provided.</h4>
+        loadingMessage = <h4>No API definition provided.</h4>
       }
 
       return <div className="swagger-ui">
diff --git a/src/standalone/layout.jsx b/src/standalone/layout.jsx
index 9ad2aace..30e46ccc 100644
--- a/src/standalone/layout.jsx
+++ b/src/standalone/layout.jsx
@@ -42,13 +42,13 @@ export default class StandaloneLayout extends React.Component {
         { loadingStatus === "failed" &&
           <div className="info">
             <div className="loading-container">
-              <h4 className="title">Failed to load spec.</h4>
+              <h4 className="title">Failed to load API definition.</h4>
             </div>
           </div>
         }
         { loadingStatus === "failedConfig" &&
           <div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
-            <h4 className="title">Failed to load config.</h4>
+            <h4 className="title">Failed to load remote configuration.</h4>
           </div>
         }
         { !loadingStatus || loadingStatus === "success" && <BaseLayout /> }