Display busy indicators in a much more consistent way. Fixes #1242

web/pgadmin/browser/templates/browser/js/collection.js

@@ -91,11 +91,26 @@ function($, _, S, pgAdmin, Backbone, Alertify, Backform) {
         };
 
       if (view) {
-        // Release the view
+        // Avoid unnecessary reloads
-        view.remove({data: true, internal: true, silent: true});
+        var n_type = data._type,
-        // Deallocate the view
+            n_value = -1,
-        delete view;
+            treeHierarchy = n.getTreeNodeHierarchy(item);
-        view = null;
+
+        if (_.isUndefined(treeHierarchy[n_type]) ||
+            _.isUndefined(treeHierarchy[n_type]._id)) {
+            n_value = -1;
+        } else {
+          n_value = treeHierarchy[n_type]._id;
+        }
+
+        if (n_value == $(panel).data(n_type)) {
+          return;
+        }
+
+        // Cache the current IDs for next time
+        $(panel).data(n_type, n_value);
+
+        panel.startLoading();
         // Reset the data object
         j.data('obj-view', null);
       }
@@ -107,6 +122,9 @@ function($, _, S, pgAdmin, Backbone, Alertify, Backform) {
       // Render subNode grid
       content.append(grid.render().$el);
       j.append(content);
+      setTimeout(function() {
+        panel.finishLoading();
+      }, 1000);
 
       // Fetch Data
       collection.fetch({reset: true})

web/pgadmin/dashboard/templates/dashboard/js/dashboard.js

@@ -31,6 +31,7 @@ function(r, $, pgAdmin, _, Backbone) {
             if (dashboardPanel) {
                 var div = dashboardPanel.layout().scene().find('.pg-panel-content');
 
+                dashboardPanel.startLoading();
                 if (div) {
                     $.ajax({
                         url: url,
@@ -38,6 +39,9 @@ function(r, $, pgAdmin, _, Backbone) {
                         dataType: "html",
                         success: function (data) {
                             $(div).html(data);
+                            setTimeout(function() {
+                              dashboardPanel.finishLoading();
+                            }, 1000);
                         },
                         error: function (xhr, status) {
                             $(div).html(
@@ -102,12 +106,16 @@ function(r, $, pgAdmin, _, Backbone) {
 
                         // Clear out everything so any existing timers die off
                         $(div).empty();
+                        dashboardPanel.startLoading();
 
                         $.ajax({
                             url: url,
                             type: "GET",
                             dataType: "html",
                             success: function (data) {
+                                setTimeout(function() {
+                                  dashboardPanel.finishLoading();
+                                }, 1000);
                                 $(div).html(data);
                             },
                             error: function (xhr, status) {

web/pgadmin/misc/depends/static/js/depends.js

@@ -72,8 +72,8 @@ define(
        */
       var appendGridToPanel = function(collection, panel, is_dependent) {
         var $container = panel[0].layout().scene().find('.pg-panel-content'),
-            $gridContainer = $container.find('.pg-panel-depends-container'),
+            $gridContainer = $container.find('.pg-panel-depends-container');
-            grid = new Backgrid.Grid({
+            self.grid = grid = new Backgrid.Grid({
               columns: [
                 {
                   name : 'type',
@@ -106,6 +106,8 @@ define(
               className: "backgrid presentation table backgrid-striped table-bordered table-hover",
             });
 
+        panel[0].startLoading();
+
         // Condition is used to save grid object to change the label of the header.
         if (is_dependent)
           self.dependentGrid = grid;
@@ -113,6 +115,9 @@ define(
           self.dependenciesGrid = grid;
 
         $gridContainer.append(grid.render().el);
+        setTimeout(function() {
+          panel[0].finishLoading();
+        }, 1000);
 
         return true;
       };
@@ -175,11 +180,30 @@ define(
     },
 
     // Fetch the actual data and update the collection
-    __updateCollection: function(collection, panel, url, messages, node) {
+    __updateCollection: function(collection, panel, url, messages, node, item, type) {
       var msg = messages[0],
           $container = panel[0].layout().scene().find('.pg-panel-content'),
           $msgContainer = $container.find('.pg-panel-depends-message'),
           $gridContainer = $container.find('.pg-panel-depends-container');
+          treeHierarchy = node.getTreeNodeHierarchy(item),
+          n_value = -1,
+          n_type = type;
+
+      // Avoid unnecessary reloads
+      if (_.isUndefined(treeHierarchy[n_type]) ||
+          _.isUndefined(treeHierarchy[n_type]._id)) {
+          n_value = -1;
+      } else {
+        n_value = treeHierarchy[n_type]._id;
+      }
+
+      if (n_value == $(panel[0]).data(n_type)) {
+        return;
+      }
+
+      // Cache the current IDs for next time
+      $(panel[0]).data(n_type, n_value);
+
 
       // Hide the grid container and show the default message container
       if (!$gridContainer.hasClass('hidden'))
@@ -197,7 +221,7 @@ define(
            */
           msg = messages[2];
           $msgContainer.text(msg);
-
+          panel[0].startLoading();
           /* Updating the label for the 'field' type of the backbone model.
            * Label should be "Database" if the node type is tablespace or role
            * and dependent tab is selected. For other nodes and dependencies tab
@@ -210,15 +234,18 @@ define(
             this.dependentGrid.columns.models[2].set({'label': 'Restriction'});
           }
 
+          // Hide the message container and show the grid container.
+          $msgContainer.addClass('hidden');
+          $gridContainer.removeClass('hidden');
           // Set the url, fetch the data and update the collection
           collection.url = url;
           collection.fetch({
             reset: true,
             success: function(res) {
-
+              // Hide loading icons once collection is retrieved.
-              // In case of success hide the message container and show the grid container.
+              setTimeout(function() {
-              $gridContainer.removeClass('hidden');
+                panel[0].finishLoading();
-              $msgContainer.addClass('hidden');
+              }, 1000);
             },
             error: function() {
             }
@@ -250,7 +277,9 @@ define(
           node.generate_url(item, 'dependent', data, true),
           ['No object selected.', 'No dependent information is available for the current object.',
             'Fetching dependent information from the server...'],
-          node
+          node,
+          item,
+          data._type
         ), 400
       );
     },
@@ -292,7 +321,9 @@ define(
           node.generate_url(item, 'dependency', data, true),
           ['Please select an object in the tree view.', 'No dependency information is available for the current object.',
             'Fetching dependency information from the server...'],
-          node
+          node,
+          item,
+          data._type
         ), 400
       );
     },

web/pgadmin/static/css/overrides.css

@@ -1349,3 +1349,7 @@ height: calc(100% - 35px);
 table.backgrid {
   overflow: auto;
 }
+
+.aciTree.aciTreeLoad {
+  background: none;
+}

web/pgadmin/static/css/wcDocker/Themes/pgadmin.css

@@ -342,7 +342,30 @@ span.fa.fa-arrow-left, .fa-arrow-right {
   visibility: hidden;
 }
 
-
 i.wcTabIcon {
   min-width: 20px;
 }
+
+.wcLoadingBackground {
+  background: black;
+  opacity: 0.6 !important;
+}
+
+.wcLoadingIcon.fa-spinner {
+  position: absolute;
+  font-size: 50px;
+  color: #ccc;
+  top: 40%;
+  left: calc(50% - 100px);
+  height: 49px !important;
+}
+
+.wcLoadingLabel {
+  top: 46%;
+  left: 0;
+  color: #fff;
+  width: calc(100% - 131px);
+  font-size: 20px;
+  position: absolute;
+  text-align: center;
+}

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -14,10 +14,10 @@
     {% endif %}
 </style>
 <div id="main-editor_panel">
-    <div id="fetching_data" class="sql-editor-busy-fetching hide">
+    <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
-        <span class="sql-editor-busy-icon"><img
+        <div class="wcLoadingBackground"></div>
-                src="{{ url_for('browser.static', filename='css/aciTree/image/load-root.gif') }}"></span>
+        <span class="sql-editor-busy-icon wcLoadingIcon fa fa-spinner fa-pulse"></span>
-        <span class="sql-editor-busy-text"></span>
+        <span class="sql-editor-busy-text wcLoadingLabel"></span>
     </div>
     <div class="sql-editor" data-trans-id="{{ uniqueId }}">
         <div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">

web/pgadmin/tools/debugger/static/css/debugger.css

@@ -1,6 +1,6 @@
 #container {
   position: absolute;
-  top: 44px;
+  top: 40px;
   bottom: 0px;
   left: 0px;
   right: 0px;
@@ -31,28 +31,12 @@
   top: 0; bottom: 0; right: 0; left: 0;
 }
 
-.wcLoadingIcon {
-  position: absolute;
-  font-size: 100px;
-  left: calc(50% - 100px);
-  top: calc(50% - 100px);
-  height: 95px;
-}
-
-.wcLoadingLabel {
-  position: absolute;
-  width: 103%;
-  font-size: 30px;
-  top: calc(50% + 0px);
-  text-align: center;
-}
-
 .debugger-container .breakpoints {
-    width: 0.9em;
+  width: 0.9em;
 }
 
 .debugger-container .CodeMirror-activeline-background {
-    background: #50B0F0;
+  background: #50B0F0;
 }
 
 .CodeMirror-foldmarker {
@@ -64,7 +48,7 @@
 }
 
 .CodeMirror, .CodeMirror-gutters {
-    min-height: 100%;
+  min-height: 100%;
 }
 
 .CodeMirror-foldgutter {

web/pgadmin/tools/sqleditor/static/css/sqleditor.css

@@ -4,11 +4,11 @@
 }
 
 .sql-editor {
-    position: absolute;
+  position: absolute;
-    left: 0;
+  left: 0;
-    right: 0;
+  right: 0;
-    top : 0;
+  top : 0;
-    bottom: 0;
+  bottom: 0;
 }
 
 .sql-editor-busy-fetching {
@@ -20,23 +20,10 @@
   margin:0;
   padding: 0;
   background: black;
-  opacity: 0.4;
+  opacity: 0.6;
   z-index: 100;
 }
 
-.sql-editor-busy-icon {
-  position:absolute;
-  left: 45%;
-  top: 40%;
-}
-
-.sql-editor-busy-text {
-  position:absolute;
-  left: 42%;
-  top: 50%;
-  font-size: 20px;
-}
-
 #editor-panel {
   position: absolute;
   left: 0;