Add loading message for droplab_ajax

4 files changed, 27 insertions, 0 deletions

diff --git a/app/assets/javascripts/droplab/droplab_ajax.js b/app/assets/javascripts/droplab/droplab_ajax.js
index b81663c281d..629260006f3 100644
--- a/app/assets/javascripts/droplab/droplab_ajax.js
+++ b/app/assets/javascripts/droplab/droplab_ajax.js
@@ -23,6 +23,7 @@ require('../window')(function(w){
     },
 
     init: function init(hook) {
+      var self = this;
       var config = hook.config.droplabAjax;
 
       if (!config || !config.endpoint || !config.method) {
@@ -33,7 +34,21 @@ require('../window')(function(w){
         return;
       }
 
+      if (config.loadingTemplate) {
+        var dynamicList = hook.list.list.querySelector('[data-dynamic]');
+
+        var loadingTemplate = document.createElement('div');
+        loadingTemplate.innerHTML = config.loadingTemplate;
+        loadingTemplate.setAttribute('data-loading-template', true);
+
+        this.listTemplate = dynamicList.outerHTML;
+        dynamicList.outerHTML = loadingTemplate.outerHTML;
+      }
+
       this._loadUrlData(config.endpoint).then(function(d) {
+        if (config.loadingTemplate) {
+          hook.list.list.querySelector('[data-loading-template]').outerHTML = self.listTemplate;
+        }
         hook.list[config.method].call(hook.list, d);
       }).catch(function(e) {
         if(e.message) {
diff --git a/app/assets/javascripts/filtered_search/dropdown_label.js.es6 b/app/assets/javascripts/filtered_search/dropdown_label.js.es6
index 4c9926c1f78..0912336b6cf 100644
--- a/app/assets/javascripts/filtered_search/dropdown_label.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_label.js.es6
@@ -10,6 +10,10 @@
         droplabAjax: {
           endpoint: 'labels.json',
           method: 'setData',
+          loadingTemplate: `
+          <div class="filter-dropdown-loading">
+            <i class="fa fa-spinner fa-spin"></i>
+          </div>`,
         },
         droplabFilter: {
           filterFunction: this.filterWithSymbol.bind(this, '~'),
diff --git a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6 b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
index 33967ddff24..73d67573868 100644
--- a/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
+++ b/app/assets/javascripts/filtered_search/dropdown_milestone.js.es6
@@ -10,6 +10,10 @@
         droplabAjax: {
           endpoint: 'milestones.json',
           method: 'setData',
+          loadingTemplate: `
+          <div class="filter-dropdown-loading">
+            <i class="fa fa-spinner fa-spin"></i>
+          </div>`,
         },
         droplabFilter: {
           filterFunction: this.filterWithSymbol.bind(this, '%'),
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index 205cecb4906..b6c137d647a 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -121,3 +121,7 @@
 .hint-dropdown {
   width: 250px;
 }
+
+.filter-dropdown-loading {
+  padding: 8px 16px;
+}