Use throbber in Standalone layout; center loading messages and content
This commit is contained in:
@@ -1,3 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import PropTypes from "prop-types"
|
import PropTypes from "prop-types"
|
||||||
|
|
||||||
@@ -32,13 +34,17 @@ export default class StandaloneLayout extends React.Component {
|
|||||||
{ Topbar ? <Topbar /> : null }
|
{ Topbar ? <Topbar /> : null }
|
||||||
{ loadingStatus === "loading" &&
|
{ loadingStatus === "loading" &&
|
||||||
<div className="info">
|
<div className="info">
|
||||||
<h4 className="title">Loading...</h4>
|
<div className="loading-container">
|
||||||
|
<div className="loading"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
{ loadingStatus === "failed" &&
|
{ loadingStatus === "failed" &&
|
||||||
<div className="info">
|
<div className="info">
|
||||||
|
<div className="loading-container">
|
||||||
<h4 className="title">Failed to load spec.</h4>
|
<h4 className="title">Failed to load spec.</h4>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
{ loadingStatus === "failedConfig" &&
|
{ loadingStatus === "failedConfig" &&
|
||||||
<div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
|
<div className="info" style={{ maxWidth: "880px", marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
|
||||||
|
|||||||
@@ -653,6 +653,10 @@
|
|||||||
.loading-container
|
.loading-container
|
||||||
{
|
{
|
||||||
padding: 40px 0 60px;
|
padding: 40px 0 60px;
|
||||||
|
min-height: 1px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.loading
|
.loading
|
||||||
{
|
{
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
Reference in New Issue
Block a user