Has anyone used NProgress.js with Ember?

Has anyone used NProgress.js with Ember?

Just thinking an ajax promise based generic progress bar solution would be nice in Ember apps.

2 Likes

I agree, but I couldn’t get NProgress.js to work. Pace works pretty great with Ember.

3 Likes

Thanks for the link @seif. I have been trying to get nprogress to work and it has been uber frustrating.

What is the process of integrating Pace with Ember?

Not much really. Just include js, and css required then in LoadingRoute add the following code, and you’re good to go

App.LoadingRoute = Ember.Route.extend(
  activate: ->
    @_super()
    Pace.restart()

  deactivate: ->
    @_super()
    Pace.stop()
)

6 Likes

Awesome! Thanks for the help.

Your link to Pace doesn’t work!

The link is correct. For some reason their github page seems to go down constantly. Keep trying. I installed Pace in my ember app in 5 minutes. Really works well @seif!

1 Like

Oh, it works now! Wohoo! Pace is quite nice. Thanks for that! :grin:

NProgress now can be used as simple as this:

App.ApplicationRoute = Ember.Route.extend
    actions:
        loading: ->
            NProgress.start()
            @router.one('didTransition', ->
                setTimeout (-> NProgress.done()), 50
            )
            true
        error: ->
            setTimeout (-> NProgress.done()), 50
2 Likes

Thanks a bunch! For reference here’s the same thing in pure JS:

App.LoadingRoute = Ember.Route.extend({
  activate: function() {
    this._super();
    return Pace.restart();
  },
  deactivate: function() {
    this._super();
    return Pace.stop();
  }
});
2 Likes

I am using ember cli and want to use pace but how can i import it in my router

I have added this to my brocfile app.import(‘bower_components/pace/pace.js’);

But Pace object is not setting global and it gives me an error ‘Pace’ is not defined on my loading route.

Hi @Prashant_Pal,

I’m using Pace in my Route by declare him as global for jshint, put the follow code in your Route and is working well, try to put the code bellow in your Route:

/* global Pace: false */

I hope that it works.

Regards,

Anderson Vaz

I’ve just created Ember CLI addon, that integrates Pace.js and significantly improves user experience while initial scrips are loading and other requests are performing. Like in Flash apps, initial scripts are being loaded via AJAX and loaded/total bytes ratio is calculated.

Demo, better to check via 3G: Ember Pace.js Demo

Github: https://github.com/vectart/ember-cli-pace

Please let me know, if the addon can be improved.

2 Likes

I’ve ended up implementing Pace like this:

 // application/route.js

 actions: {
   loading(transition) {
     this._super(...arguments);
     Pace.start();
     transition.promise.finally(function() {
       Pace.stop();
     });
   }
 }