From de24c69fe44df73c355a3ec481c7f146778cb4a6 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Sat, 9 Sep 2017 10:16:15 +0200
Subject: Add a loading screen for initial datacenter fetch

---
 src/pages/App.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/App.js b/src/pages/App.js
index fc38b92d..317442f6 100644
--- a/src/pages/App.js
+++ b/src/pages/App.js
@@ -4,6 +4,7 @@ import {connect} from "react-redux";
 import {ShortcutManager} from "react-shortcuts";
 import {openSimulationSucceeded} from "../actions/simulations";
 import {fetchLatestDatacenter, resetCurrentDatacenter} from "../actions/topology/building";
+import LoadingScreen from "../components/map/LoadingScreen";
 import MapStage from "../components/map/MapStage";
 import AppNavbar from "../components/navigation/AppNavbar";
 import DeleteMachineModal from "../containers/modals/DeleteMachineModal";
@@ -40,10 +41,15 @@ class AppContainer extends React.Component {
         return (
             <div className="page-container full-height">
                 <AppNavbar/>
-                <div className="full-height">
-                    <MapStage/>
-                    <TopologySidebar/>
-                </div>
+                {this.props.datacenterIsLoading ?
+                    <div className="full-height d-flex align-items-center justify-content-center">
+                        <LoadingScreen/>
+                    </div> :
+                    <div className="full-height">
+                        <MapStage/>
+                        <TopologySidebar/>
+                    </div>
+                }
                 <EditRoomNameModal/>
                 <DeleteRoomModal/>
                 <EditRackNameModal/>
@@ -54,6 +60,12 @@ class AppContainer extends React.Component {
     }
 }
 
+const mapStateToProps = state => {
+    return {
+        datacenterIsLoading: state.currentDatacenterId === -1,
+    };
+};
+
 const mapDispatchToProps = dispatch => {
     return {
         storeSimulationId: id => dispatch(openSimulationSucceeded(id)),
@@ -63,7 +75,7 @@ const mapDispatchToProps = dispatch => {
 };
 
 const App = connect(
-    undefined,
+    mapStateToProps,
     mapDispatchToProps
 )(AppContainer);
 
-- 
cgit v1.2.3