The index page of my app fails to display the contents because the progress bar hangs at 98%. Originally this could only be reproduced on the iOS Chrome app but I have also been able to reproduce it on the "not here" on both my desktop and on my iPhone.

An error displays in the console (for the 'not here' example, I haven't been able to reproduce it on the desktop for my own app):
Exception in defer callback: TypeError: Cannot read property 'findOne' of undefined

during the last few weeks I noticed that my page flashes when when pressing enter on the route to reload it

my application has more than 10 packages, I started to remove them to see what was causing the problem, remove Iron-router-progress solve the problem, let me know if you feel the same or that could be the problem

Note: I'm using fast-render and information comes too fast so that the progress is not necessary, but I like to have it :'C

Love the package, super simple and easy to setup. Do you have any config options for when the progress bar will start?

Ideally I would like to only show the loading bar on routes that take more than a second to load.

Hello,

A huge thanks for this package, it's one of my favorites. I'm trying to upgrade iron-router-progress with Meteor 0.8 and its new Blaze engine but I'm getting some problems. Iron-router-progress does not appear:

mrt remove iron-router-progress

And then, in my smart.json, I have added the following lines and run mrt update.

{
    "packages": {
        "iron-router-progress": {
            "git": "https://github.com/Multiply/iron-router-progress.git",
            "branch": "blaze-integration"
        }
    }
}

Everything works as expected:

✓ iron-router-progress
    branch: https://github.com/Multiply/iron-router-progress.git#blaze-integration

But when I'm running meteor, I can't see the #iron-router-progress div. Am I doing something wrong?

Currently the user of IRP can't define a tick interval, or how much a tick increase the percentage.

Support changing both the interval and the incremental value added to the percentage.
Both should be functions with the same options as the current two implementations.

Re-Open #36
Source for reproduction updated to latest version

I was just wondering if it would be possible to make the current 'percent' value available outside of the IronRouterProgress template. For one of my routes, I'd like to display a loading bar in the middle of the page instead of at the top, and figured I could re-purpose the 'percent' value for this use case. Maybe this would just require setting a Session value?

Not sure if it's a good idea or not, or if there is a way to do it with the current API, so if anyone has any other suggestions, I'd like to hear them.

Thank you.

After some testing I find out that my loading template for iron router is not shown, because of the iron router progress package. I would rather prefer that the loading template is supported next to the progress bar and spinner.

Hello,

I'm getting the warning "Route dispatch never rendered. Did you forget to call this.next() in an onBeforeAction?" in my console whenever a route is loaded. These are my routes:

Router.configure
  layoutTemplate: 'default-layout'
  loadingTemplate: 'loading-layout'

Router.map ->
  @route 'index',
    path: '/'
    action: ->
      @render 'index'
      return  
    fastRender: true
    subscriptions: ->
      if Meteor.isClient
        sessionId = Session.get('sessionId')
      return [
        Meteor.subscribe('courses')
        Meteor.subscribe('selections', sessionId)
      ]

  @route 'search',
    path: '/search'
    action: ->
      @render 'search'
      return  
    fastRender: true    
    subscriptions: ->
      return [
        Meteor.subscribe('institutions')
        Meteor.subscribe('undergraduateCourses')
      ]

  return

When I change subscriptions to waitOn, I don't get the warning message.

Also, when I change:

Router.onBeforeAction ->
    debug 'IR:before'
    if @ready()
        self.functions.done()
        self.functions.stop()
        @next()
    else
        self.functions.progress()
    @

to this:

Router.onBeforeAction ->
    debug 'IR:before'
    if @ready()
        self.functions.done()
        self.functions.stop()
    else
        self.functions.progress()
    @next()
    @

I don't get the warning message

Im trying to use the delay feature to prevent the progress bar from showing on routes that load in under 150ms, like your documentation shows.

I'm using the following syntax
IronRouterProgress.configure({ tick: false, spinner: true, delay : 150 });

However, the progress bar ALWAYS shows up right away, no matter what I set the delay to. My app is built off this Meteor-boilerplate.

Some general changes to how subscriptions, and the hooks are working, are in flux. Consider an updated package ready during the weekend, or monday, depending on when @cmather and @tmeasday have something consistent for us.

Hi,

Currently the loading bar is designed for Left-to-Right languages, with the loading bar progress direction left-to-right and the spinner on the right of the screen. Would it be possible to make the direction of the loading bar as well as the position of the spinner configurable so that it would be easier to support Right-to-Left languages?

Regards

Rudolf Bargholz

Looks like there is problem with this peace of code:

Router.onBeforeAction(function(pause) {
  var loadingTemplate;
  if (this.ready()) {

ready() causes error. I think this hook should be last in queue of hooks.

E.g. this is my code:

var mustBeSignedIn = function(pause) {
    this.subscribe('items').wait();
};

Router.onBeforeAction(mustBeSignedIn);

Router.map(function () {
    this.route('items', {
        path: '/'
    });
});

It produces this error:

Exception from Tracker recompute function: Error: 
You called wait() after calling ready() inside the same computation tree.
You can fix this problem in two possible ways:
...

But this version (without global hook) works ok:

Router.map(function () {
    this.route('items', {
        path: '/',
        onBeforeAction: mustBeSignedIn
    });
});

Maybe the Atmosphere URL, maybe the demo.

Example:

After upgrading Meteor to 0.6.6.3 application still reload until I remove
iron-router-progress.

iron-router-progress was installed by command: mrt add iron-router-progress
Previous version of Meter was 0.6.6

Adding multiply:iron-router-progress to project cause iron:router reactively reload each route twice.
If I remove it, route loads once.

authenticate: start routing.js ( onBefore )

filter: signin routing.js

## GLOBAL onAfterAction ######## ( onAfter global router )

authenticate: start routing.js

filter: signin routing.js

## GLOBAL onAfterAction

Hey!
First of all: nice package! :)
But consider the following scenario: We have a route which has a before-hook which redirects a user when a certain condition is not met, say, she isn't logged in or anything. The whole thing is wrapped in its own controller.

So we set up our route like this:

Router.map ->
    @route 'myroute', 
        path: '/myroute'
        controller: MyRouteController

And our controller looks like this:

@MyRouteController = RouteController.extend
      template: 'mytemplate'
      before: ->
          @redirect 'loginPage' if not Meteor.userId()
      waitOn: ->
          Meteor.subscribe 'mySecuredPublicationWhatever'  # for example, this publication publishes a collection only when a user is logged in.

When accessing this route as a non-logged-in client, iron-router-progress's before-hook is called before MyRouteController's. This of course leads to a never finishing progress bar. However when specifying the before-hook not in the controller, but in the route itself – like this

Router.map ->
    @route 'myroute', 
        path: '/myroute'
        controller: MyRouteController
        before: ->
              @redirect 'loginPage' if not Meteor.userId()

– everything works fine, as iron-router-progress's before-hook gets called after the route's: the user directly gets redirected to the login page, no progress bar is showing.

I have fixed the inconsistency of the event-order so far by simply changing lines 160-166 in progress.coffee to this:

routeObjectToUse = if route.controller then route.controller.prototype else route.options

for type, cb of callbacks
    if _.isArray routeObjectToUse[type]
        routeObjectToUse[type].push cb
    else if _.isFunction routeObjectToUse[type]
        routeObjectToUse[type] = [routeObjectToUse[type], cb]
    else
        routeObjectToUse[type] = cb

So that iron-router-progress directly hooks into the controller, if there is one. I haven't run into any problems yet.

Let me know what you think of this!

Sorry for my poor english, i have a problem on my project and i did a simple app to reproduce it.
I have a simple collection of items to display. I use a pager that will load more data from the collection when you click on a button.
The expected behaviour is that new items are added to the current list.
But in fact, when the progress bar appear just after the click on the button, then the current list disappear from the screen, and then it appears with old and new items.

The app is here :

• source code : https://github.com/Rebolon/meteor-ironrouterprogress-bug
• demo : http://displaybugreproductionwithironrouterprogess.meteor.com/ (click the button to see the flash)

if you remove the mrt:iron-router-progress from the app, then you will have the expected behaviour.

Hope it helps, and that i didn't do any mistake.

I couldn't get my head around why it was quite hard for me to press my bootstrap's .navbar-toggle button with my big thumb on my phone... turns out, the iron-router-progress spinner covers a big part of it, even when it is not shown.

This is likely due to the z-index property of the spinner, which is set to 10000 (while the navbar is at 1030). But I tried setting the navbar-toggle button's z-index to 10001 and it didn't help... I am not the most gifted when it comes to CSS.

I would understand (and apologize) if this is considered a non-issue, considering that it involves an unrelated package : bootstrap3. Though since bootstrap is a very commonly used one, I figured it might be interesting to make sure the two modules go hand in hand more nicely, for example by making the spinner cover the button only when it is shown?

Hello there

Is there an exact reason why the dependency is set on the "dev" branch? Like is version 0.6.1 not compatible with this package, and if yes: why?

Greetings

I am developing a meteor.js application, and I am having a strange error. I wrote my code here:

http://stackoverflow.com/questions/25749931/iron-router-error-in-meteor-js-project-old-templates-data-get-re-called

and as you can see I have a template called groupsmain which shows list of different groups, and when I click one of them, I am going to groupdetail template. Everything is working fine, but only when I go groupsmain template from inside group detail template by clicking navbar, although everything looks good on the page, I am getting the error below in console. Now I am in groupsmain template, not groupdetail template, but it is giving error about the properties which sub-template of groupdetail template is using.

Exception in template helper: TypeError: Cannot read property 'photoId' of undefined
at Object.Template.groupdetailgeneral.helpers.imageUrl   (http://localhost:3000/client/views/groups/groupdetail/groupdetail_includes/groupdetailgenera  l.js?6c735e98e1dbfa1b7514f5e8f58237ea781f3bb6:8:51)
at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2610:16
at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1602:16
at Spacebars.call (http://localhost:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:169:18)
at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:106:25)
at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:110:39)
at Template.groupdetailgeneral.HTML.IMG.src (http://localhost:3000/client/views/groups/groupdetail/groupdetail_includes/…mplate.groupdetailgeneral.js?7f3022b55bf1958efe4a4a679309ad74d60ef7ea:7:24)
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2017:12)
at Blaze._HTMLJSExpander.def.visitAttribute (http://localhost:3000/packages/blaze.js?  5ec4e54b22ab2196bcc772669c0619f71666393e:1950:21)
at HTML.TransformingVisitor.def.visitAttributes (http://localhost:3000/packages/htmljs.js?fcf2660be84fbc0c33b97ee8932dbd46612f3566:226:44) debug.js:41
Exception in template helper: TypeError: Cannot read property 'adminId' of undefined
at Object.Template.groupdetailgeneral.helpers.isAdmin (http://localhost:3000/client/views/groups/groupdetail/groupdetail_includes/groupdetailgeneral.js?6c735e98e1dbfa1b7514f5e8f58237ea781f3bb6:20:26)
at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2610:16
at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1602:16
at Object.Spacebars.call (http://localhost:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:169:18)
at Template.groupdetailgeneral.HTML.DIV.HTML.DIV.HTML.P.Blaze.If.HTML.A.class (http://localhost:3000/client/views/groups/groupdetail/groupdetail_includes/…plate.groupdetailgeneral.js?7f3022b55bf1958efe4a4a679309ad74d60ef7ea:22:22)
at null.<anonymous> (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2385:44)
at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1787:16
at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2017:12)
at viewAutorun (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1786:18)
at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)

Also, when I am in groupdetail template, if I write the url localhost:3000/groupsmain to the browser and click enter, it does not give error. It is only giving error if I click this link on navbar which is ....{{pathFor 'groupsmain'}}">Groups...

And it looks like when I removed iron-router-progress from the project, It looks like the error is solved. I really want to use iron-router-progress in my project though. What should I do about it?

As pointed out by @copleykj here: https://gist.github.com/copleykj/5694b3f5fdca962f484f calling @stop() inside a before callback, will result in an endless load-progress state.

I fixed this issue for the notFound by simply using setTimeout in my before callback, but it doesn't seem to fix it here.

Solution 1: override @stop of the route, and call IronRouterProgress.done()
Solution 2: Add a general hook, for the stop call
Solution 3: Do as I do, and simply redirect users to a different page, for stuff like this. It'll then trigger the unload callback, and start the progress over.

Hey,

you might want to migrate your old package name from mrt:iron-router-progress to something more accurate 😄

Like multiply:iron-router-progress or something. Packages from the mrt namespace always have kind of a legacy touch, at least in my opinion.

Reminder: Update the README.md to contain the new package name (Section Installation). Discover-Meteor is using your package in their book, so they should be informed, too (if you're going to adapt the new naming scheme).

I find that the progress bar still displays when I simply click a dropdown in a Bootstrap navbar. There's no route to disable there.

I'll be happy to set up a demo of the bug if requested, but not sure if the package is still being maintained.

Is it possible to disable the loading text, it makes my template jump when it adds the text and I really see no need for it you have the progress bar and spinner.

After updating to iron-router the ng-click on the anchor tag is not working.

Here is my router:
Router.route('/login', {
controller: 'LoginController',
action: 'login'
});

Router.route('/home', {
controller: 'HomeController',
action: 'home'
});

if (Meteor.isClient) {
ApplicationController = RouteController.extend({
onBeforeAction: function () {
console.log('app before hook!');
this.next();
},
action: function () {
console.log('this should be overridden!');
}
});

Router.onAfterAction(function (req, res, next) {
    Tracker.afterFlush(function () {
        angular.element(document).injector().invoke(['$compile', '$document', '$rootScope',
            function ($compile, $document, $rootScope) {
                $compile($document)($rootScope);
                if (!$rootScope.$$phase)
                    $rootScope.$apply();
            }
        ]);
    });
});



LoginController = ApplicationController.extend({
    login: function () {
        this.render('login');
    }
});

HomeController = ApplicationController.extend({
    home: function () {
        this.render('home');
    }
});

Progress bar shows when their ensureSignIn loads the login screen. Thought you all might have an insight from the progress package side. Here is the issue:
meteor-useraccounts/core#287

setting progress:false globally doesn't get picked up by their UserAccounts' routes.

I just don't want the progress bar to show when their ensureSignIn is loaded. Looking for a way these two packages can play together.

Thanks,
Don

Hi,

I am facing an issue I was hoping you could help with. I have a secured app that uses the progress bar and generally all is well, except when I have an onBeforeAction hook that will render a landing page if the user is not logged in.

When I visit a page and Im not secured, the landing page that is render the progress bar, as well as the spinner but neither then disappears. I assume this is because the hook has not completed as I don't have a next() method call. Not sure on the best way to solve this (still fairly new). Please see below for an example of my hook code:

var requireLogin = function() {
    if (!Meteor.user()) {
        if (Meteor.loggingIn()) {
            this.render(this.loadingTemplate);
        } else {
            this.render('landingPage');
        }
    } else {
        this.next();
    }
}
Router.onBeforeAction(requireLogin, {except: ['landingPage']});

Thanks

Dave

I'd like to expose the underlying API, so it can be used for almost any kind of loading, but mainly for the iron-router.

If anyone wants to pitch in with design ideas, feel free to comment here.

Features I'd like to be available:

• configure - Takes a configuration object.
• prepare - Internal call for setting up the DOM-element.
• reset - Forces a cleanup either before running start or after running done
• start - Takes a configuration object that overrides the defaults from prepare for a single progress iteration
• progress - Starts a new progress-bar if none is running, or ticks a random or exact amount of percent forward
• done - Fades out the progress-bar and spinner

List to be updated.

It was great to be able to fire IronRouterProgress.start() and .done() when performing heavy tasks on the client. We built a large app that worked with this very nicely. From a usability perspective, it's great to be able to use the exact same visual motif to represent busy work on the client regardless of whether it's a navigation between routes or a long server call on the same route ... etc. Now that it's meticulously hidden, I will need to fork and brutalize. Why was this great feature removed?

On Chromium Version 31.0.1650.63 (238485) my cpu fan become crazy and cpu load grow up.

This always, not only when the progress bar appear.

I have the same issue with your demo page: https://iron-router-progress.meteor.com/

If you view Chormium/Dev tools/timeline and switch on recorder you should see many "composite layers" in an infinte loop.

If you change the route, the last data is removed first which causes a template rerendering. In my example, if no burgers or pizze exist, the page tells you.
This doesn't happen without iron-router-progress.
The bug described in the branch iron-router_bug doesn't occur here!

https://github.com/Phosphoros/iron-router-bug

Projects using the blaze-integration branch will fail when upgrading. Does this package rely on a specific version of IR ?

Thanks

Trying to understand how this works, it'd be nice if the progress bar doesn't complete before the waitOn directive is done...

As it stands, on mobile devices with bad internet connections, the progress bar finishes, well before the page renders (for example, see http://differential.io/blog/thank-you-dhh-and-others and load it on your iphone without wifi).

Is it expected to wait for waitOn before completing? If not, can you think of a way to hook into that?

Hello, i implemented the load-more feature from discover meteor book. When I remove iron-router-progress from the project, it works as expected, but when I have iron-router-progress, it does page refresh and scrollbar goes to the top of the page after loading more items.

After updating to the latest version, my console log is being bombarded with log messages. Can you please remove them and redeploy the plugin? 😃

I've migrated my app to use new meteor 0.9.1.1 and now, when it's trying to load page, I get an error:

 Exception from Tracker recompute function: Error: Couldn't find a template named "loading" or "loading". Are you sure you defined it?
    at null._render (http://localhost:3001/packages/iron:dynamic-template.js?32038885cb1dad7957291ffebfffcb7f8cd57d20:239:17)
    at doRender (http://localhost:3001/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1845:25)
    at http://localhost:3001/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1787:16
    at Object.Blaze._withCurrentView (http://localhost:3001/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2017:12)
    at viewAutorun (http://localhost:3001/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1786:18)
    at Tracker.Computation._compute (http://localhost:3001/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)
    at new Tracker.Computation (http://localhost:3001/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:206:10)
    at Object.Tracker.autorun (http://localhost:3001/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:476:11)
    at Blaze.View.autorun (http://localhost:3001/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1785:19)
    at http://localhost:3001/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1839:10

When a router is stopped, after the load hook is called, but before any other hooks are, we need something to handle this.

This happens when you render a different template in a before hook, and stop it from rendering further. Ie. the before hook never calls any other hooks, as it seems.

I just updated to Meteor 1.0.2 and the latest Iron-Router and now I'm not seeing the progress bar I see it when I refresh the page but when I navigate between routes I'm not seeing anything. If I use the waitOn loading option I see that running

I've noticed a very weird issue in that when I installed iron-router-progress it seems to run every hook in iron-router twice.

Code on demo should be

mrt add not mrt install

When I updated packages at meteor 1.0: downgraded mrt:iron-router-progress from version 0.9.0 to version 0.4.0

The README needs to be updated, to properly reflect, and document the new API

yogiben:admin requires iron:[email protected] and this package is using iron:[email protected].

I'll play around with it tomorrow to see if this package still works with the latest iron:router, but just wanted to raise it as an issue either way.

Moved the discussion here (from #22), as per @tmeasday's request.

IRP should allow staying on the old route, while loading the next. It's how I originally imagined IRP to behave, so this should also turn into the default behaviour.

Currently it will show an empty page with the progress bar, unless you've defined a loadingTemplate. If you have, it'll show that and a progress bar.

I already have a before book that many of my routes use:

var waitForSubscriptions = function (pause) {
  if (this.ready()) { //all the subs have come in
    if (Meteor.isClient)
      IronRouterProgress.done();
  } else { //all subscriptions aren't yet ready, keep waiting
    if (Meteor.isClient)
      IronRouterProgress.start();
    pause();
  }
};

I'd ideally like to show the progress bar only when I call the start method as above. Essentially this means not showing the progress bar on routes where the first time waitForSubscriptions is called this.ready() is true. This comes up alot for me because I share a big set of subscriptions between many routes. I think it's not helpful to show the progress bar at all in cases where the route change is instant and no data needs to load from the server.

Is this something that's supported?

thanks!

Iron-router uses a loading plugin it would be nice to override this, here is the reference iron-meteor/iron-router#1063

I just installed as is and it's working fine. However, with a vanilla meteor project I don't see a spinner, just the horizontal bar going left to right. Do I need to create a delayed connection to see the spinner in action such as shown here iron-router-progress-example

If so maybe there could be some config switcht to test/see the spinner in action?

How can this be adapted to work with the new iron-router package system (http://eventedmind.github.io/iron-router/)?

To clean up the original codebase, we need to ensure, that we can rely on calling IronRouterProgress.done() from our before hook, or simply remove it.

Needs further testing, as we might not want to set it to done in the after hook, if something in the after is slow.