Needs an extension point for adding loading animation

[wyuenho]

No description provided.

[JoshClose]

I was just about to add an issue for this and decided to search first and found it.

How are you thinking of doing this?

[ErichBSchulz]

+1

[halcyonandon]

Just sharing how I added a spinner and some of the pitfalls to this approach. Thought it might help spec'ing this out or for anyone that needs an work-around in the interim.

The pitfalls:
I need to do this for every instance (not exactly DRY).
I've run into issues/constraints adding fetch like that to pageable collections (vague sorry, don't recall specifics at the moment)
...others (I'll add later if its worth it)

What I'm doing:
I'm currently hacking in my loading spinner by adding a div after the table within a containing element, which displays the spinner directly under the thead, that gets defined pre-fetch. Then, on the js side of things... in my collection I trigger fetch as an event i can do something on:

        fetch: function(options) {

            this.trigger('fetch', this, options);
            return Backbone.PageableCollection.prototype.fetch.call(this, options);
        }

In my vent/view, I do the following:

            collection.on("fetch", function() {

                $('#summaryLoading').show().spin();
                $('#summary tbody').empty();
                $('#graphLoading').show().spin();
                $('#chart svg').empty();

            }, this);

Then I destroy on fetch done:

            collection.fetch({reset: true}).done(_.bind(function ()  {

                $('#summaryLoading').hide().spin(false);
                ...

For anyone looking for a spinner, I'm using http://fgnass.github.io/spin.js/ with no complaints so far

[stof]

I added a spinner without touching anything in backgrid. My spinner appears below the table (next to the pagination links) allowing to continue reading the current page until the ajax response comes back. It uses events triggered by Backbone itself.
It works for read-only grids only (displaying the spinner on request will also display it when saving data otherwise).
This code uses CSS only for the spinner as I uses FontAwesome

    var Spinner = Backbone.View.extend({
        tagName: 'span',

        initialize: function (options) {
            Backgrid.requireOptions(options, ['collection']);

            this.listenTo(this.collection, 'request', this.displaySpinner);
            this.listenTo(this.collection, 'sync', this.removeSpinner);
            this.listenTo(this.collection, 'error', this.removeSpinner);
        },

        displaySpinner: function () {
            this.$el.empty().append('<i class="icon-spinner icon-spin"></i>');
        },

        removeSpinner: function () {
            this.$el.empty();
        }
    });

It would be great to have an event allowing to make it work for editable grids as well

[JoshClose]

I was able to build it in and fade out the whole grid and show a spinner over it while it's loading... but it would be nice if it was built in instead of custom code.

[kriswill]

You can also consolidate the events for sync and error into a single handler:

this.listenTo(this.collection, 'sync error', this.removeSpinner)

[morficus]

@wyuenho is this something you would want as part of the 'core', or is it better suited to be a plugin? (like Paginator and Filter)

[wyuenho]

Probably in the core. Just need to replace the tbody before and after fetching.

Sent from my iPhone

On 18 Nov, 2013, at 2:56 pm, Maurice Williams [email protected] wrote:

@wyuenho is this something you would want as part of the 'core', or is it better suited to be a plugin? (like Paginator and Filter)

—
Reply to this email directly or view it on GitHub.

[morficus]

@wyuenho could you take a quick look at my implementation of the "loading indicator" and let me know what you think: morficus@7aa8940

[burtyish]

Whatever the implementation, please consider that the spinner may not be an animated gif but rather a spinning font, as seen on font-awesome here
So it's important that the loader element's class name be configurable.