Global AJAX loading indicator for Mithril.js

gistfile1.js

(function () {
  //
  // Global ajax loaders
  //
  // This is useful for showing a loading animation, yet still taking
  // advantage of the default behavior of m.request, which is to wait
  // for all requests to complete before rendering the view.
  //
  // The loader is assumed to already be on the page
  var loader = document.querySelector('.ajax-loader')
  m.onLoadingStart = function () { loader.style.display = 'block' }
  m.onLoadingEnd = function () { loader.style.display = 'none' }
  
  // Monkey-patch m.request to display ajax loader when necessary
  var originalRequest = m.request
  var pendingCount = 0
  m.request = function () {
    if (pendingCount === 0) m.onLoadingStart()
    pendingCount += 1
  
    var promise = originalRequest.apply(null, arguments)
    promise.then(function() {
      pendingCount -= 1
      if (pendingCount === 0) m.onLoadingEnd()
    })
  
    return promise
  }
})()