CategoryOverpass: loading indicators for sub lists

src/CategoryBase.js

@@ -21,8 +21,8 @@ function CategoryBase (options, data) {
   var a
 
   if (this.id !== 'index') {
-    var domHeader = document.createElement('header')
-    this.dom.appendChild(domHeader)
+    this.domHeader = document.createElement('header')
+    this.dom.appendChild(this.domHeader)
 
     if ('name' in this.data) {
       if (typeof this.data.name === 'object') {
@@ -40,13 +40,13 @@ function CategoryBase (options, data) {
     a.appendChild(document.createTextNode(name))
     a.href = '#'
     a.onclick = this.toggle.bind(this)
-    domHeader.appendChild(a)
+    this.domHeader.appendChild(a)
 
     if (this.options.repositoryId && this.options.repositoryId !== 'default') {
       a = document.createElement('span')
       a.className = 'repoId'
       a.appendChild(document.createTextNode(this.options.repositoryId))
-      domHeader.appendChild(a)
+      this.domHeader.appendChild(a)
     }
 
     if (this.shallShowReload()) {
@@ -68,7 +68,7 @@ function CategoryBase (options, data) {
           }
         })
       }.bind(this)
-      domHeader.appendChild(a)
+      this.domHeader.appendChild(a)
     }
   }
 

src/CategoryOverpass.js

@@ -104,14 +104,19 @@ function CategoryOverpass (options, data) {
   p.innerHTML = '<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">' + lang('loading') + '</span>'
   this.dom.appendChild(p)
 
-  p = document.createElement('div')
-  p.className = 'loadingIndicator2'
-  p.innerHTML = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>'
-  this.dom.appendChild(p)
-
   this.domStatus = document.createElement('div')
   this.domStatus.className = 'status'
-  this.dom.appendChild(this.domStatus)
+
+  if (this.data.lists) {
+    this.dom.insertBefore(this.domStatus, this.domHeader.nextSibling)
+  } else {
+    p = document.createElement('div')
+    p.className = 'loadingIndicator2'
+    p.innerHTML = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>'
+    this.dom.appendChild(p)
+
+    this.dom.appendChild(this.domStatus)
+  }
 
   register_hook('state-get', function (state) {
     if (this.isOpen) {
@@ -255,6 +260,11 @@ CategoryOverpass.prototype.open = function () {
         let domHeader = document.createElement('header')
         dom.appendChild(domHeader)
 
+        let p = document.createElement('div')
+        p.className = 'loadingIndicator'
+        p.innerHTML = '<i class="fa fa-spinner fa-pulse fa-fw"></i><span class="sr-only">' + lang('loading') + '</span>'
+        dom.appendChild(p)
+
         if (typeof listData.name === 'undefined') {
           name = k
         } else if (typeof listData.name === 'object') {
@@ -273,6 +283,11 @@ CategoryOverpass.prototype.open = function () {
         dom.appendChild(domContent)
 
         list.addTo(domContent)
+
+        p = document.createElement('div')
+        p.className = 'loadingIndicator2'
+        p.innerHTML = '<div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div>'
+        dom.appendChild(p)
       }
     } else {
       let list = new OverpassLayerList(this.layer, {})

src/category.css

@@ -8,7 +8,8 @@
   font-size: 15px;
   display: none;
 }
-.category.loading > .loadingIndicator {
+.category.loading > .loadingIndicator,
+.category.loading > .content > .categoryWrapper > .category-list > .loadingIndicator {
   padding-top: 2px;
   display: block;
 }
@@ -18,14 +19,16 @@
 }
 
 /* Source: http://tobiasahlin.com/spinkit/ */
-.category.open.loading > .loadingIndicator2 {
+.category.open.loading > .loadingIndicator2,
+.category.open.loading > .content > .categoryWrapper > .category-list.open > .loadingIndicator2 {
   text-align: left;
   display: block;
   background: #efefef;
   padding-left: 40px;
 }
 
-.category.loading > .loadingIndicator2 > div {
+.category.loading > .loadingIndicator2 > div,
+.category.loading > .content > .categoryWrapper > .category-list.open > .loadingIndicator2 > div {
   width: 9px;
   height: 9px;
   margin-right: 9px;