2 files changed, 69 insertions, 39 deletions

diff --git a/ui/imports/ui/components/environment/environment.html b/ui/imports/ui/components/environment/environment.html
index 96bc48c..e12921b 100644
--- a/ui/imports/ui/components/environment/environment.html
+++ b/ui/imports/ui/components/environment/environment.html
@@ -24,37 +24,44 @@
 
         <div class="sm-main-content-segment">
 
-          {{#if selectedNodeType }}
-            {{#if (getShow 'dashboard') }}
-              <div class="sm-dashboard">
-                {{> UI.dynamic template=dashboardTemplate 
-                               data=(argsDashboard rdxSelectedNodeId) }}
-              </div>
-            {{/if }}
-            {{#if (getShow 'graph') }}
-              {{#if isSelectedNodeAGraph }}
+          {{#if isLoading }}
+
+            <div class="sm-loading-message"></div>
 
-                <!--div class="sm-graph">
-                  > d3graph argsD3Graph
-                </div-->
+          {{else }}
 
-                <div class="sm-network-graph">
-                  {{> NetworkGraphManager argsNetworkGraphManager }}
+            {{#if selectedNodeType }}
+              {{#if (getShow 'dashboard') }}
+                <div class="sm-dashboard">
+                  {{> UI.dynamic template=dashboardTemplate 
+                                 data=(argsDashboard rdxSelectedNodeId) }}
                 </div>
+              {{/if }}
+              {{#if (getShow 'graph') }}
+                {{#if isSelectedNodeAGraph }}
 
-                {{> GraphTooltipWindow (argsGraphTooltipWindow graphTooltipWindow) }}
+                  <!--div class="sm-graph">
+                    > d3graph argsD3Graph
+                  </div-->
 
-                {{#if showVedgeInfoWindow }}
-                  {{> VedgeInfoWindow (argsVedgeInfoWindow vedgeInfoWindow) }}
-                {{/if }}
-              
-              {{else }}
+                  <div class="sm-network-graph">
+                    {{> NetworkGraphManager argsNetworkGraphManager }}
+                  </div>
 
-              <div class="sm-node-no-graph-data-msg">{{ rPath i18n 'components.environment.noGraphForLeafMsg' }}</div>
+                  {{> GraphTooltipWindow (argsGraphTooltipWindow graphTooltipWindow) }}
 
+                  {{#if showVedgeInfoWindow }}
+                    {{> VedgeInfoWindow (argsVedgeInfoWindow vedgeInfoWindow) }}
+                  {{/if }}
+                
+                {{else }}
+
+                <div class="sm-node-no-graph-data-msg">{{ rPath i18n 'components.environment.noGraphForLeafMsg' }}</div>
+
+                {{/if }}
               {{/if }}
             {{/if }}
-          {{/if }}
+          {{/if }} <!-- if isLoading -->
         </div>
 
     </div>
diff --git a/ui/imports/ui/components/environment/environment.js b/ui/imports/ui/components/environment/environment.js
index 1f0e723..9df6046 100644
--- a/ui/imports/ui/components/environment/environment.js
+++ b/ui/imports/ui/components/environment/environment.js
@@ -96,6 +96,7 @@ Template.Environment.onCreated(function () {
     vedgeInfoWindow: { node: null, left: 0, top: 0, show: false },
     dashboardName: 'environment',
     collapsedSideMenu: instance.collapsedSideMenu,
+    isLoading: false,
   });
 
   instance.currentData = new ReactiveVar(null, EJSON.equals);
@@ -226,27 +227,44 @@ Template.Environment.onCreated(function () {
     
   });
 
-    /*
-    (() => {
-      if (R.isNil(controller.params.query.selectedNodeId) &&
-          R.isNil(selectedNodeId)) {
-        return;
-      }
+  /*
+  (() => {
+    if (R.isNil(controller.params.query.selectedNodeId) &&
+        R.isNil(selectedNodeId)) {
+      return;
+    }
 
-      let srlSelectedNodeId = idToStr(selectedNodeId);
-      if (R.equals(controller.params.query.selectedNodeId, srlSelectedNodeId)) {
-        return;
-      }
+    let srlSelectedNodeId = idToStr(selectedNodeId);
+    if (R.equals(controller.params.query.selectedNodeId, srlSelectedNodeId)) {
+      return;
+    }
 
-      setTimeout(() => {
-        Router.go('environment', 
-          { _id: controller.params._id }, 
-          { query: { selectedNodeId: srlSelectedNodeId } });
-      }, 1);
+    setTimeout(() => {
+      Router.go('environment', 
+        { _id: controller.params._id }, 
+        { query: { selectedNodeId: srlSelectedNodeId } });
+    }, 1);
+
+  })();
+  */
 
-    })();
-    */
+  let prevIdPath = null;
+  instance.autorun(function () {
+    let idPath = instance.rdxSelectedNodeIdPath.get();
+    if (prevIdPath !== idPath) {
+      prevIdPath = idPath;
+      instance.state.set('isLoading', true);
+    }
+  });
 
+  instance.autorun(function () {
+    let isLoading = instance.state.get('isLoading');
+    if (isLoading) {
+      setTimeout(() => {
+        instance.state.set('isLoading', false);
+      }, 200);
+    }
+  });
 });
 
 Template.Environment.onDestroyed(function () {
@@ -294,6 +312,11 @@ Template.Environment.helpers({
     return instance.state.get(key);
   },
 
+  isLoading: function () {
+    let instance = Template.instance();
+    return instance.state.get('isLoading');
+  },
+
   argsNavMenu: function (envName, mainNode) {
     let instance = Template.instance();
     return {