Show loading spinner while model is loading

Hi, before using your pagination, i use to have a loading var on my controllers set to false, whenever i changed the model i would set this loading to true and to false again on the promise return, success/fail method(i mean “save().then(success, fail)”), so i can show a loading spinner on the view(just in the table area) while model is loading.

Question is, how can i implement this with this pagination? i thought something like this:

var loading = false,
fetchContent: function() {
    this.set('loading', true);
    res.then(function(rows) {
        this.set('loading', false);
    }
}

then in my template:

{{#if loading}}
<!-- Show loading -->
{{else}}
<!-- List entries -->
{{/if}}

I intend to use a reopen(paged-remote-array) on a mixing to add this implementation. Thank you.

[matheusdavidson]

Hey @mharris717, i did like this(have a look at the manipulation of loading property):

• Added a loading property
• Set loading to true at the beginning
• Set loading to false at success and fail

loading: false,
fetchContent: function() {
        // Setting loading
        this.set('loading', true);

        var store = this.get('store');
        var modelName = this.get('modelName');

        var ops = this.get('paramsForBackend');
        var res = store.find(modelName, ops);
        this.incrementProperty("numRemoteCalls");
        var me = this;

        res.then(function(rows) {
            Util.log("PagedRemoteArray#fetchContent in res.then " + rows);
            var newMeta = {};
            var totalPagesField = me.get('paramMapping').total_pages;
            if (rows.meta) {
                for (var k in rows.meta) {
                    newMeta[k] = rows.meta[k];
                    if (totalPagesField && totalPagesField === k) {
                        newMeta['total_pages'] = rows.meta[k];
                    }
                }
            }

            // Unset loading
            me.set('loading', false);
            return me.set("meta", newMeta);
        }, function(error) {
            // Unset loading
            me.set('loading', false);
            Util.log("PagedRemoteArray#fetchContent error " + error);
        });

        return res;
    },

then in my templates, i have:

{{#if model.loading}}
    {{partial "loading"}}
    <br />
{{else}}
-- table with entries --
{{/if}}

{{partial "loading"}} is a partial with a spinning loader

It works very well like this, if you want to implement something like this would be a nice idea. You could just give access to the loading property so the user can manipulate they template like this if they want to.

[mharris717]

Added. https://github.com/mharris717/ember-cli-pagination/pull/137

Sorry I took so long here. Life really got in the way for a while. Thanks for taking the time to contribute!