Use throbber in Standalone layout; center loading messages and content

This commit is contained in:
Kyle Shockey
2017-12-12 13:07:18 -08:00
parent faa9ada6b8
commit 0864ca849f
2 changed files with 12 additions and 2 deletions

View File

@@ -1,3 +1,5 @@
import React from "react"
import PropTypes from "prop-types"
@@ -32,13 +34,17 @@ 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">
<div className="loading-container">
<h4 className="title">Failed to load spec.</h4>
</div>
</div>
}
{ loadingStatus === "failedConfig" &&
<div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>

View File

@@ -653,6 +653,10 @@
.loading-container
{
padding: 40px 0 60px;
min-height: 1px;
display: flex;
justify-content: center;
.loading
{
position: relative;