How to wait on http calls in Iron Router’s onBeforeAction?

I want to create a preloading script that performs a number of async functions to download external content. I’m pretty close here, but I haven’t quite figured out how to to defer calling this.next() in my onBeforeAction function. In the code below you can see I use a loop and setTimeout but I lose the context of my router somehow and this.next() is undefined. I believe this is because my preloadProject function gets to the end and the Router warns me that I forgot to call this.next(); prior to my waitToRender function completing.

if (Meteor.isClient) {
    IR_BeforeHooks = {
        preloadProject: function() {
            var itemsProcessed = 0;
            _.each(items.items, function(e) {
                    HTTP.get(e.S3URL, {
                            headers: {
                                'Accept': '*/*'
                            },
                            responseType: 'arraybuffer' //requires aldeed:http
                        }, function(error, result) {
                            if (error) {
                                Session.set('error', {
                                    'title': 'Could not download',
                                    'message': error
                                });
                            }
                            if (result) {
                                itemsProcessed = itemsProcessed + 1;
                            }
                        }) //http get
                }) //each
            function waitToRender(router) {
                console.log('waiting...')
                var progress = (itemsProcessed / items.items.length) * 100;
                if (progress < 100) {
                    $('.progress-bar').css('width', Math.floor(progress) + '%');
                    setTimeout((function() {
                        waitToRender(router);
                    }), 50);
                    //console.log('timeout for a few ms here')
                }
                else {
                    console.log('all done, render');
                    router.next(); // I get this is not a function error here
                }
            }
            waitToRender(this);
        }
    }
}

and my router

  • Meteor Iron Router : custom id route
  • Regex routing with Iron-router
  • Not found page pops up for a second - Meteor - iron - router
  • Creation of user profile page with Meteor and Iron Router
  • pathFor for iron router meteor
  • Meteor load scripts, CSS specific to pages
  • Router.before(
        IR_BeforeHooks.preloadProject, 
        {
            only:['editor', 'viewer', 'embedder']
        }
    );
    

    Because of complicated requirements in my project I need to perform these tasks before rendering. How can I get Iron Router to wait on my http calls without blocking the browser?

  • Meteor iron-router splash screen error on deploy only
  • Multiple subscriptions in iron router
  • Not found page pops up for a second - Meteor - iron - router
  • Server side routes in Iron Router and Meteor
  • pathFor for iron router meteor
  • Meteor: get template name in spacebars
  • 2 Solutions collect form web for “How to wait on http calls in Iron Router’s onBeforeAction?”

    I’ve found a solution. The problem, as I suspected, was that Iron Router was nulling itself when my primary hook function finished its sync work. So to fix this I setup my own copy of this.next when I start my work, and call my copy of the function when my async work is completed.

    IR_BeforeHooks = {
      preloadProject: function() {
        var myNext = this.next;
        ...//http calls and etc
        function waitToRender(router) {
          console.log('waiting...')
          var progress = (itemsProcessed / items.items.length) * 100;
          if (progress < 100) {
            ...//use set timeout to recall waitToRender
          }
          else{
            myNext();
          }
        }
      }
    }
    

    Put router.next() outside else block, even if you’re not rendering anything you need to call next.

     if (progress < 100) {
                            $('.progress-bar').css('width', Math.floor(progress) + '%');
                            setTimeout((function() {
                                waitToRender(router);
                            }), 50);
                            //console.log('timeout for a few ms here')
                        }
                        else {
                            console.log('all done, render');
                        }
    router.next();