Example how to make simple spinner for AJAX request ?

[riston]

The basic solution what I would use is based on promises 'resolve' and 'reject'. Also one boolean flag variable needs to be used to mark the state. The possible case which is not handled is the timeout, if the server gives no timeout in some meaningful time then there should be client side timer for that.

Is there any better ways to implement the basic spinner ?

[lhorie]

You could have a helper that returns both data and the flag, and use config to specify a timeout handler

var requestWithFeedback = function(args) {
  var completed = m.prop(false)
  var complete = function() {
    completed(true)
  }
  args.background = true
  args.config = function(xhr) {
    xhr.timeout = 4000
    xhr.ontimeout = function() {
      complete()
      m.redraw()
    }
  }
  return {
    data: m.request(args).then(complete, complete).then(m.redraw),
    ready: completed
  }
}

var MyController = function() {
  this.things = requestWithFeedback({method: "GET", url: "/things"})
}
var myView = function(ctrl) {
  return !ctrl.things.ready() ? m("img[src=loading.gif]") : m("ul", [
    ctrl.things.data().map(function(thing) {
      return m("li", thing.name)
    })
  ]) 
}

m.module(document.body, {controller: MyController, view: myView})

[eddyystop]

I may be missing something here, but wouldn't .then(complete, complete) always convert the payload to true as m.prop returns the stored value?

function complete () { completed.bind(this, true)(); /* or completed(true) */ } would work though.

[lhorie]

@eddyystop oh you're right. My mistake. I'll fix the snippet

[eddyystop]

It's an elegant pattern. Thanks!

[mjiricka]

To make it work, I had to do this (cosmetic changes are not important):

m.requestFeedback = function (args) {
    var completed = m.prop(false);
    var complete = function(data) {
        completed(true);
        m.redraw();

        return data;
    };

    args.background = true;
    args.config = function(xhr) {
        xhr.timeout = 4000;
        xhr.ontimeout = function() {
            complete();
            m.redraw();
        };
    };

    return {
        data: m.request(args).then(complete, complete),
        ready: completed
    };
}

I do not know how the previous example could work, unless m.redraw would return its parameter in some older version.

Usage is following:

var req = m.requestFeedback({method: 'POST', url: '/service/', data: Controller.vm});
req.data.then(status => {
   console.log(status);
});

[dead-claudia]

@mjiricka I think Leo just made a mistake in his snippet. The proper fix would be this:

m.requestFeedback = function(args) {
  var completed = m.prop(false)
  args.background = true
  args.config = function(xhr) {
    xhr.timeout = 4000
    xhr.ontimeout = function() {
      completed(true)
      m.redraw()
    }
  }
  return {
    data: m.request(args)
      .then(
        function(data) { completed(true); return data },
        function(err) { completed(true); throw err })
      .then(function (data) { m.redraw(); return data }),
    ready: completed
  }
}

[mjiricka]

@isiahmeadows Thank you for your quick reply! I noticed throw instead of return, that is a good idea. But is it important to call m.redraw in different promise, not immediately after setting completed(true)?

[dead-claudia]

@mjiricka Not really, but you probably should at some point in the chain, if you want any changes reflected back in the view.