diff --git a/web/pgadmin/browser/templates/browser/js/collection.js b/web/pgadmin/browser/templates/browser/js/collection.js index 776ac4c41..f62ff4ad1 100644 --- a/web/pgadmin/browser/templates/browser/js/collection.js +++ b/web/pgadmin/browser/templates/browser/js/collection.js @@ -91,11 +91,26 @@ 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); + + 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}) diff --git a/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js b/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js index 9a470d9a5..0d2e825bc 100644 --- a/web/pgadmin/dashboard/templates/dashboard/js/dashboard.js +++ b/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) { diff --git a/web/pgadmin/misc/depends/static/js/depends.js b/web/pgadmin/misc/depends/static/js/depends.js index d7534c882..a0c9c144b 100644 --- a/web/pgadmin/misc/depends/static/js/depends.js +++ b/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'), - grid = new Backgrid.Grid({ + $gridContainer = $container.find('.pg-panel-depends-container'); + 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) { - - // In case of success hide the message container and show the grid container. - $gridContainer.removeClass('hidden'); - $msgContainer.addClass('hidden'); + // Hide loading icons once collection is retrieved. + setTimeout(function() { + panel[0].finishLoading(); + }, 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 ); }, diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index eda27e16d..7b231eb78 100755 --- a/web/pgadmin/static/css/overrides.css +++ b/web/pgadmin/static/css/overrides.css @@ -1349,3 +1349,7 @@ height: calc(100% - 35px); table.backgrid { overflow: auto; } + +.aciTree.aciTreeLoad { + background: none; +} diff --git a/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css b/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css index 7cbc7d681..d0e969120 100644 --- a/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html index 473eff98f..516bd8da6 100644 --- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html +++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html @@ -14,10 +14,10 @@ {% endif %}
-
- - +
+
+ +