diff --git a/src/core/components/layouts/base.jsx b/src/core/components/layouts/base.jsx index 1f5a0788..235366f7 100644 --- a/src/core/components/layouts/base.jsx +++ b/src/core/components/layouts/base.jsx @@ -61,7 +61,18 @@ export default class BaseLayout extends React.Component { const isSpecEmpty = !specSelectors.specStr() if(isSpecEmpty) { - return

No spec provided.

+ let loadingMessage + if(isLoading) { + loadingMessage =
+ } else { + loadingMessage =

No API definition provided.

+ } + + return
+
+ {loadingMessage} +
+
} return ( diff --git a/src/standalone/layout.jsx b/src/standalone/layout.jsx index dc36b46e..30e46ccc 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,17 +34,21 @@ export default class StandaloneLayout extends React.Component { { Topbar ? : null } { loadingStatus === "loading" &&
-

Loading...

+
+
+
} { loadingStatus === "failed" &&
-

Failed to load spec.

+
+

Failed to load API definition.

+
} { loadingStatus === "failedConfig" &&
-

Failed to load config.

+

Failed to load remote configuration.

} { !loadingStatus || loadingStatus === "success" && } diff --git a/src/style/_layout.scss b/src/style/_layout.scss index 1d399f76..72109a73 100644 --- a/src/style/_layout.scss +++ b/src/style/_layout.scss @@ -653,6 +653,11 @@ .loading-container { padding: 40px 0 60px; + margin-top: 1em; + min-height: 1px; + display: flex; + justify-content: center; + .loading { position: relative;