Merge pull request #2232 from weaveworks/1804-loading-topologies

Show loading indicator on topology changes

client/app/scripts/reducers/__tests__/root-test.js

@@ -499,6 +499,7 @@ describe('RootReducer', () => {
     let nextState = initialState.set('currentTopology', fromJS(topologies[0]));
     nextState = reducer(nextState, {type: ActionTypes.SET_RECEIVED_NODES_DELTA});
     expect(nextState.get('gridMode')).toBe(true);
+    expect(nextState.get('initialNodesLoaded')).toBe(true);
   });
   it('cleans up old adjacencies', () => {
     // Add some nodes

client/app/scripts/reducers/root.js

@@ -75,7 +75,8 @@ export const initialState = makeMap({
   version: '...',
   versionUpdate: null,
   websocketClosed: false,
-  exportingGraph: false
+  exportingGraph: false,
+  initialNodesLoaded: false
 });
 
 // adds ID field to topology (based on last part of URL path) and save urls in
@@ -148,6 +149,12 @@ function resumeUpdate(state) {
   return state.set('updatePausedAt', null);
 }
 
+function clearNodes(state) {
+  return state
+    .update('nodes', nodes => nodes.clear())
+    .set('nodesLoaded', false);
+}
+
 export function rootReducer(state = initialState, action) {
   if (!action.type) {
     error('Payload missing a type!', action);
@@ -278,9 +285,10 @@ export function rootReducer(state = initialState, action) {
 
       if (action.topologyId !== state.get('currentTopologyId')) {
         state = setTopology(state, action.topologyId);
-        state = state.update('nodes', nodes => nodes.clear());
+        state = clearNodes(state);
       }
       state = state.set('availableCanvasMetrics', makeList());
+
       return state;
     }
 
@@ -290,8 +298,9 @@ export function rootReducer(state = initialState, action) {
 
       if (action.topologyId !== state.get('currentTopologyId')) {
         state = setTopology(state, action.topologyId);
-        state = state.update('nodes', nodes => nodes.clear());
+        state = clearNodes(state);
       }
+
       state = state.set('availableCanvasMetrics', makeList());
       return state;
     }
@@ -515,12 +524,14 @@ export function rootReducer(state = initialState, action) {
     }
 
     case ActionTypes.SET_RECEIVED_NODES_DELTA: {
-      // Turn on the table view if the graph is too complex
-      if (!state.get('nodesLoaded')) {
+      // Turn on the table view if the graph is too complex, but skip this block if
+      // the user has already loaded topologies once.
+      if (!state.get('initialNodesLoaded') && !state.get('nodesLoaded')) {
         const topoStats = state.get('currentTopology').get('stats');
         state = graphExceedsComplexityThresh(topoStats)
           ? state.set('gridMode', true)
           : state;
+        state = state.set('initialNodesLoaded', true);
       }
       return state.set('nodesLoaded', true);
     }