Add a loading screen for initial datacenter fetch

3 files changed, 29 insertions, 6 deletions

diff --git a/src/components/map/LoadingScreen.js b/src/components/map/LoadingScreen.js
new file mode 100644
index 00000000..3d5753e2
--- /dev/null
+++ b/src/components/map/LoadingScreen.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import FontAwesome from "react-fontawesome";
+
+const LoadingScreen = () => (
+    <div className="display-4">
+        <FontAwesome name="refresh" className="mr-4" spin/>
+        Loading your datacenter...
+    </div>
+);
+
+export default LoadingScreen;
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);
 
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index 9c5087cc..0f1856f5 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -60,7 +60,7 @@ export function* onFetchLatestDatacenter(action) {
     }
 }
 
-export function* fetchDatacenter(datacenterId) {
+function* fetchDatacenter(datacenterId) {
     try {
         yield fetchAndStoreDatacenter(datacenterId);
         const rooms = yield fetchAndStoreRoomsOfDatacenter(datacenterId);