[18.01] Fix lack of feedback when slow grids are loading data from the server.

client/galaxy/scripts/mvc/grid/grid-shared.js

@@ -1,9 +1,11 @@
 /** This class renders the grid list with shared section. */
 import GridView from "mvc/grid/grid-view";
+import LoadingIndicator from "ui/loading-indicator";
+
 var View = Backbone.View.extend({
     initialize: function(options) {
         var self = this;
-        this.setElement($("<div/>"));
+        LoadingIndicator.markViewAsLoading(this);
         this.model = new Backbone.Model(options);
         this.item = this.model.get("item");
         this.title = this.model.get("plural");

client/galaxy/scripts/mvc/grid/grid-view.js

@@ -7,6 +7,8 @@ import Utils from "utils/utils";
 import GridModel from "mvc/grid/grid-model";
 import Templates from "mvc/grid/grid-template";
 import PopupMenu from "mvc/ui/popup-menu";
+import LoadingIndicator from "ui/loading-indicator";
+
 // grid view
 export default Backbone.View.extend({
     // model
@@ -28,9 +30,8 @@ export default Backbone.View.extend({
             self.add_filter_condition("tags", tag);
         };
 
-        // set element
-        this.setElement("<div/>");
         if (grid_config.url_base && !grid_config.items) {
+            LoadingIndicator.markViewAsLoading(this);
             var url_data = grid_config.url_data || {};
             _.each(grid_config.filters, (v, k) => {
                 url_data[`f-${k}`] = v;
@@ -44,6 +45,8 @@ export default Backbone.View.extend({
                 }
             });
         } else {
+            // set element
+            this.setElement("<div>");
             this.init_grid(grid_config);
         }
 

client/galaxy/scripts/mvc/history/history-list.js

@@ -4,6 +4,7 @@ import Utils from "utils/utils";
 import GridView from "mvc/grid/grid-view";
 import HistoryModel from "mvc/history/history-model";
 import historyCopyDialog from "mvc/history/copy-dialog";
+import LoadingIndicator from "ui/loading-indicator";
 
 var HistoryGridView = GridView.extend({
     _showCopyDialog: function(id) {
@@ -55,7 +56,8 @@ var View = Backbone.View.extend({
     title: _l("Histories"),
     initialize: function(options) {
         var self = this;
-        this.setElement($("<div/>"));
+        LoadingIndicator.markViewAsLoading(this);
+
         this.model = new Backbone.Model();
         Utils.get({
             url: `${Galaxy.root}history/${options.action_id}?${$.param(Galaxy.params)}`,

client/galaxy/scripts/mvc/list/list-view.js

@@ -791,7 +791,7 @@ var ListPanel = Backbone.View.extend(BASE_MVC.LoggableMixin).extend(
             this.debug("_showLoadingIndicator", this.indicator, msg, speed, callback);
             speed = speed !== undefined ? speed : this.fxSpeed;
             if (!this.indicator) {
-                this.indicator = new LoadingIndicator(this.$el);
+                this.indicator = new LoadingIndicator.LoadingIndicator(this.$el);
                 this.debug("\t created", this.indicator);
             }
             if (!this.$el.is(":visible")) {

client/galaxy/scripts/mvc/workflow/workflow.js

@@ -4,6 +4,8 @@ import TAGS from "mvc/tag";
 import WORKFLOWS from "mvc/workflow/workflow-model";
 import QueryStringParsing from "utils/query-string-parsing";
 import _l from "utils/localization";
+import LoadingIndicator from "ui/loading-indicator";
+
 /** View of the individual workflows */
 const WorkflowItemView = Backbone.View.extend({
     tagName: "tr", // name of (orphan) root tag in this.el
@@ -157,7 +159,7 @@ const WorkflowItemView = Backbone.View.extend({
 const WorkflowListView = Backbone.View.extend({
     title: _l("Workflows"),
     initialize: function() {
-        this.setElement("<div/>");
+        LoadingIndicator.markViewAsLoading(this);
         _.bindAll(this, "adjustActiondropdown");
         this.collection = new WORKFLOWS.WorkflowCollection();
         this.collection.fetch().done(this.render());

client/galaxy/scripts/ui/loading-indicator.js

@@ -99,5 +99,13 @@ function LoadingIndicator($where, options) {
     return self;
 }
 
+const markViewAsLoading = function(view) {
+    view.setElement($('<div><div class="loading"></div></div>'));
+    new LoadingIndicator(view.$(".loading")).show();
+};
+
 //============================================================================
-export default LoadingIndicator;
+export default {
+    LoadingIndicator: LoadingIndicator,
+    markViewAsLoading: markViewAsLoading
+};