Flowrouter flickering after autopublish is removed

help
1

I’m super new to flowRouter so go easy :grinning:

Flowrouter is super smooth until I remove autopublish. Whenever I remove it the reactive subscribed templates start flickering whenever the url changes.

Is there a way to tell flowRouter to wait until subscriptions are ready before starting the next route?

example:

Cheers :smile:

2

Any guidance would be awesome thanks :slight_smile:

3

It will be hard to diagnose this problem without seeing a code example…

4

See below. Please do let me know if you would like any further context. Thanks!

route.js

FlowRouter.route('/:uniquePageUrl*', {
    action: function () {
        BlazeLayout.render('mainLayoutTmpl', {template: 'pageTmpl'});
    }
});

pagePub.js

Meteor.publish('singlePage', function(uniquePageUrl){
    return Pages.find({uniquePageUrl: uniquePageUrl});
});

page.js

Template.pageTmpl.onCreated(function() {
    var self = this;
    self.autorun(function() {
        var uniquePageUrl = FlowRouter.getParam('uniquePageUrl') || "/";
        self.subscribe('singlePage', uniquePageUrl);
    });
});

Template.pageTmpl.helpers({
    page: function() {
        var uniquePageUrl = FlowRouter.getParam('uniquePageUrl') || "/";
        var page = Pages.findOne({uniquePageUrl: uniquePageUrl});

        return page;
    }
});

pageTmpl.html

<template name="pageTmpl">
    This is a page
    <h1>{{page.title}}</h1>
    <p>{{page.body}}</p>
    <b>{{page.uniquePageUrl}}</b>
</template>
5

Just curious, what’s the purpose of the asterisk after :uniquePageUrl ? I haven’t seen that before with FR, and I’m not sure if it’s a typo or you know something I may not. Can’t find anything in FR docs.

It makes sense that you would experience a slight delay as you are re-running an autorun to load the updated subscription with each route change. The data is already available client-side when you are using autopublish, so no delay occurs.

You can update your onCreated callback to something like this to display a loading template or similar while you are fetching data (assuming you are using ReactiveVar, if not you could use Session too):

Template.pageTmpl.onCreated( function() {
    var self = this;
    self.ready = new ReactiveVar(false);
    self.autorun(function(comp) {
        var uniquePageUrl = FlowRouter.getParam('uniquePageUrl') || "/";
        self.subscribe('singlePage', uniquePageUrl, function () {
            self.ready.set(true);
            comp.stop()
        });
    });
});

You can pass a callback to template.subscribe() that will run once the subscription is fully loaded.

6

Thanks Adamsidiali, I’ll try that out!
With regards to '/uniquePageUrl*', I was looking for a solution to enable a user to define a route themselves for a CMS.

While researching I found out that FlowRouter routes are based on path-to-regexp which is capable of something called zero-or-more. I’m not sure if this is the best solution but its working ok for me.