Loading

ironmansoftware · May 18, 2019 · 723afc3 · 723afc3
1 parent 00a90b8
commit 723afc3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 6 deletions.
diff --git a/src/UniversalDashboard/Styles/site.css b/src/UniversalDashboard/Styles/site.css
@@ -2,6 +2,7 @@ body {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
+    margin: 0;
 }
 
 .app {
@@ -55,4 +56,28 @@ td {
 .jLRkOo {
     margin-top: 20px !important;
     margin-left: 10px !important;
+}
+
+.v-wrap{
+    height: 100% !important;
+    white-space: nowrap !important;
+    text-align: center !important;
+    display: block !important;
+    min-height: auto !important;
+    flex-direction: row !important;
+}
+.v-wrap:before{
+    content: "";
+    display: inline-block;
+    vertical-align: middle;
+    width: 0;
+    /* adjust for white space between pseudo element and next sibling */
+    margin-right: -.25em;
+    /* stretch line height */
+    height: 100vh; 
+}
+.v-box{
+    display: inline-block;
+    vertical-align: middle;
+    white-space: normal;
 }
diff --git a/src/client/src/app/App.jsx b/src/client/src/app/App.jsx
@@ -13,7 +13,7 @@ export default class App extends React.Component {
         super();
 
         this.state = {
-            loading: false
+            loading: true
         }
     }
 
@@ -26,22 +26,23 @@ export default class App extends React.Component {
     }
 
     componentWillMount() {
-        this.showLoader = true;
         this.loadJavascript(getApiPath() + "/api/internal/javascript/framework", function() {
-            this.showLoader = false;
             this.setState({
                 loading: false
             })
         }.bind(this))
-
-        setTimeout(function(){if(this.showLoader){this.setState({loading: true})}}.bind(this), 750);
     }
 
     render () {
         var regex = new RegExp('^' + window.baseUrl + '(?!.*(\/login))(?!.*(\/license)).*$');
 
         if (this.state.loading) {
-            return <div style={{paddingLeft: '48vw', paddingTop: '40vh', backgroundColor: '#0689B7'}}><Spinner name="folding-cube" style={{width: '100px', height: '100px', color: '#E8E8E8'}}/></div>
+            return <div style={{backgroundColor: '#FFFFFF'}} className="v-wrap">
+                        <article className="v-box">
+                            <Spinner name="folding-cube" style={{width: '150px', height: '150px', color: '#0689B7'}}/>
+                        </article>
+
+                    </div>
         }
 
         return (<Router>