Consistent busy indication. Fixes #1242

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

@@ -300,8 +300,6 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
         // Stored layout in database from the previous session
         var layout = '{{ layout }}';
 
-        obj.docker.startLoading('{{ _('Loading...') }}');
-
         // Try to restore the layout if there is one
         if (layout != '') {
           try {
@@ -314,10 +312,6 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
         } else {
           obj.buildDefaultLayout()
         }
-
-        obj.docker.on(wcDocker.EVENT.LOADED, function() {
-            obj.docker.finishLoading(500);
-        });
       }
 
       // Syntax highlight the SQL Pane

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

@@ -91,11 +91,25 @@ function($, _, S, pgAdmin, Backbone, Alertify, Backform) {
         };
 
       if (view) {
-        // Release the view
-        view.remove({data: true, internal: true, silent: true});
-        // Deallocate the view
-        delete view;
-        view = null;
+        // Avoid unnecessary reloads
+        var n_type = data._type,
+            n_value = -1,
+            treeHierarchy = n.getTreeNodeHierarchy(item);
+
+        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);
+
         // Reset the data object
         j.data('obj-view', null);
       }

web/pgadmin/browser/templates/browser/js/node.js

@@ -788,7 +788,28 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
         // Callback to show object properties
         properties = function() {
 
-          var panel = this;
+          // Avoid unnecessary reloads
+          var panel = this,
+              i = tree.selected(),
+              d = i && tree.itemData(i),
+              n_type = d._type,
+              n_value = -1,
+              n = i && d && pgBrowser.Nodes[d._type],
+              treeHierarchy = n.getTreeNodeHierarchy(i);
+
+          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);
 
           if (!content.hasClass('has-pg-prop-btn-group'))
             content.addClass('has-pg-prop-btn-group');

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

@@ -175,11 +175,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'))
@@ -210,19 +229,12 @@ 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) {
-
-              // In case of success hide the message container and show the grid container.
-              $gridContainer.removeClass('hidden');
-              $msgContainer.addClass('hidden');
-            },
-            error: function() {
-            }
-          });
+          collection.fetch({ reset: true });
         }
       }
       if (msg != '') {
@@ -250,7 +262,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 +306,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/misc/sql/static/js/sql.js

@@ -16,7 +16,7 @@ function(_, $, pgBrowser) {
       this.initialized = true;
       _.bindAll(this, 'showSQL', 'sqlPanelVisibilityChanged');
 
-      var sqlPanels = pgBrowser.docker.findPanels('sql');
+      this.sqlPanels = sqlPanels = pgBrowser.docker.findPanels('sql');
 
       // We will listend to the visibility change of the SQL panel
       pgBrowser.Events.on(
@@ -61,6 +61,26 @@ function(_, $, pgBrowser) {
             sql = '-- ' + pgBrowser.messages.NODE_HAS_NO_SQL;
             if (node.hasSQL) {
 
+              var self = this,
+                  n_type = data._type,
+                  n_value = -1,
+                  treeHierarchy = node.getTreeNodeHierarchy(item);
+
+              // 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 == $(sqlPanels[0]).data(n_type)) {
+                return;
+              }
+
+              // Cache the current IDs for next time
+              $(this.sqlPanels[0]).data(n_type, n_value);
+
               sql = '';
               var url = node.generate_url(item, 'sql', data, true);
 

web/pgadmin/misc/statistics/static/js/statistics.js

@@ -139,14 +139,15 @@ function(_, $, pgBrowser, Backgrid) {
     },
 
     // Fetch the actual data and update the collection
-    __updateCollection: function(url, node) {
+    __updateCollection: function(url, node, item, node_type) {
       var $container = this.panel[0].layout().scene().find('.pg-panel-content'),
           $msgContainer = $container.find('.pg-panel-statistics-message'),
           $gridContainer = $container.find('.pg-panel-statistics-container'),
           collection = this.collection,
           panel = this.panel,
           self = this,
-          msg = '';
+          msg = '',
+          n_type = node_type;
 
       if (node) {
         msg = pgBrowser.messages.NODE_HAS_NO_STATISTICS;
@@ -154,6 +155,24 @@ function(_, $, pgBrowser, Backgrid) {
          * showStatistics function.
          */
         if (node.hasStatistics) {
+
+          // Avoid unnecessary reloads
+          var treeHierarchy = node.getTreeNodeHierarchy(item);
+          if (_.isUndefined(treeHierarchy[n_type]) ||
+              _.isUndefined(treeHierarchy[n_type]._id)) {
+              n_value = undefined,
+              n_value = -1;
+          } else {
+            n_value = treeHierarchy[n_type]._id;
+          }
+
+          if (n_value == $(this.panel[0]).data(n_type)) {
+            return;
+          }
+
+          // Cache the current IDs for next time
+          $(this.panel[0]).data(n_type, n_value);
+
           /* Set the message because ajax request may take time to
            * fetch the information from the server.
            */
@@ -236,7 +255,7 @@ function(_, $, pgBrowser, Backgrid) {
         self.timeout =  setTimeout(
           function() {
             self.__updateCollection.call(
-              self, node.generate_url(item, 'stats', data, true), node
+              self, node.generate_url(item, 'stats', data, true), 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;
+  top: 34%;
+  left: 48%;
+  font-size: 50px;
+  color: #ccc;
+  height: 49px !important;
+}
+
+.wcLoadingLabel {
+  top: 40%;
+  left: 0;
+  color: #fff;
+  width: 100%;
+  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">
-        <span class="sql-editor-busy-icon"><img
-                src="{{ url_for('browser.static', filename='css/aciTree/image/load-root.gif') }}"></span>
-        <span class="sql-editor-busy-text"></span>
+    <div id="fetching_data" class="wcLoadingIconContainer sql-editor-busy-fetching hide">
+        <div class="wcLoadingBackground"></div>
+        <span class="sql-editor-busy-icon wcLoadingIcon fa fa-spinner fa-pulse"></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/datagrid/templates/datagrid/js/datagrid.js

@@ -18,6 +18,12 @@ define(
         this.initialized = true;
         this.title_index = 1;
 
+        this.spinner_el = '<div class="wcLoadingContainer">'+
+              '<div class="wcLoadingBackground"></div>'+
+                '<div class="wcLoadingIconContainer">'+
+                  '<i class="wcLoadingIcon fa fa-spinner fa-pulse"></i>'+
+                '</div>'+
+              '</div>';
         // Define list of nodes on which view data option appears
         var supported_nodes = [
            'table', 'view', 'mview',
@@ -326,17 +332,19 @@ define(
             baseUrl = "{{ url_for('datagrid.index') }}"  + "panel/" + res.data.gridTransId + "/false/"
                                                                     + encodeURIComponent(grid_title);
             var openDataGridURL = function(j) {
-                setTimeout(function() {
-                    var frameInitialized = j.data('frameInitialized');
-                    if (frameInitialized) {
-                        var frame = j.data('embeddedFrame');
-                        if (frame) {
-                            frame.openURL(baseUrl);
-                        }
-                    } else {
-                        openDataGridURL(j);
-                    }
-                }, 100);
+              j.data('embeddedFrame').$container.append(self.spinner_el);
+              setTimeout(function() {
+                var frameInitialized = j.data('frameInitialized');
+                if (frameInitialized) {
+                  var frame = j.data('embeddedFrame');
+                  if (frame) {
+                    frame.openURL(baseUrl);
+                    frame.$container.find('.wcLoadingContainer').hide(1);
+                  }
+                } else {
+                    openDataGridURL(j);
+                }
+              }, 100);
             };
             openDataGridURL($(dataGridPanel));
           },
@@ -422,17 +430,19 @@ define(
             baseUrl = "{{ url_for('datagrid.index') }}"  + "panel/" + res.data.gridTransId + "/true/"
                         + encodeURIComponent(grid_title) + '?' + "query_url=" + encodeURI(sURL);
             var openQueryToolURL = function(j) {
-                setTimeout(function() {
-                    var frameInitialized = j.data('frameInitialized');
-                    if (frameInitialized) {
-                        var frame = j.data('embeddedFrame');
-                        if (frame) {
-                            frame.openURL(baseUrl);
-                        }
-                    } else {
-                        openQueryToolURL(j);
-                    }
-                }, 100);
+              j.data('embeddedFrame').$container.append(pgAdmin.DataGrid.spinner_el);
+              setTimeout(function() {
+                var frameInitialized = j.data('frameInitialized');
+                if (frameInitialized) {
+                  var frame = j.data('embeddedFrame');
+                  if (frame) {
+                    frame.openURL(baseUrl);
+                    frame.$container.find('.wcLoadingContainer').delay(1000).hide(1);
+                  }
+                } else {
+                  openQueryToolURL(j);
+                }
+              }, 100);
             };
             openQueryToolURL($(queryToolPanel));
           },

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;
-    left: 0;
-    right: 0;
-    top : 0;
-    bottom: 0;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top : 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;

web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js

@@ -1143,15 +1143,16 @@ define(
 
           $("#btn-flash").prop('disabled', true);
 
+          self.trigger(
+            'pgadmin-sqleditor:loading-icon:message',
+              '{{ _('Waiting for the query execution to complete...') }}'
+          );
+
           $.ajax({
             url: "{{ url_for('sqleditor.index') }}" + "view_data/start/" + self.transId,
             method: 'GET',
             success: function(res) {
               if (res.data.status) {
-                self.trigger(
-                  'pgadmin-sqleditor:loading-icon:message',
-                   '{{ _('Waiting for the query execution to complete...') }}'
-                );
 
                 self.can_edit = res.data.can_edit;
                 self.can_filter = res.data.can_filter;