Use throbber in Standalone layout; center loading messages and content
This commit is contained in:
@@ -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" }}>
|
||||
|
||||
@@ -653,6 +653,10 @@
|
||||
.loading-container
|
||||
{
|
||||
padding: 40px 0 60px;
|
||||
min-height: 1px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.loading
|
||||
{
|
||||
position: relative;
|
||||
|
||||
Reference in New Issue
Block a user