Hi! I need a quick elaboration on DDP connection and rendering.
Situation:
Let’s say when I first open a website, there are 150 posts to be rendered. In this case, a DDP connection should be established first. Then, all the published data that I subscribed to get cloned to DB and rendered. I noticed the subscription turns to a ready state only when all the 150 posts are cloned to local DB. In other words it seems to work like this:
DDP connection established.
Start cloning data from server to client.
When all the data is cloned, subscription.ready() is true.
Between steps 2 and 3, users see the posts are rendered as they are being cloned to the DB. Instead of showing the user an incomplete list of posts, I hide all the posts at step 2 and show all of them at once at step 3.
Question
Let’s say I navigate away to /posts/1 and then come back to /. It looks like there’s still some loading time; in other words, it takes a few seconds for subscription.ready() to be true. My guess for the reason is that when you navigate to /posts/1 all the posts that we had inside local DB get wiped, and we have to clone them again. Is it true? If not, what’s really happening?
More Context
In my app, I expect the user to go back and forth the /posts/ page and /posts/:id page pretty often. Right now, everytime the user goes back to the /posts page he needs to wait for a couple of seconds for the posts to be loaded. I feel like there must be a smart solution for this because it’s the same data that he already viewed, and should be able to be cached.
Also, when the user navigates, he does Router.go("/posts/") or Router.go("/posts/POST_ID"). I am using Iron Router. I don’t think it’s doing a full reload everytime I navigate, but some loading. What I was wondering was where this little bit of loading comes from, and whether there is a way to not do any loading.
I would check in browser network websockets what is being done on DDP side.
To identify if it is data based delay, or you are causing it by something else, for example that animation etc.
One thing that confuses me is that the loading that I am referring to is the time subscription.ready() needs to become true. It’s possible that there might be some loading caused by animations and rendering, but I don’t know why subscription.ready() doesn’t immediately return true when you go back to /posts/ from /posts/SOME_POST_ID.
I think the above sentence better captures my confusion in the original post.
But something feels strange about your use of “this” in that autorun, I always assign instance = this or self = this and use that instance/self, as this inside tracker function feels for me as bad scoping. But maybe it is correctly used by you and I am paranoid
It looks like the subscription wasn’t the problem. After the initial load, the subscription for /posts/ page is always ready. I also checked that all the data were available even after I navigated to /posts/:id. The problem is that when I call Route.go('posts') it takes about a second before that page is rendered. I thought this delay was coming from the data subscription, but I was wrong.
Do you know where this extra second is coming from? I am running a webview inside a mobile environment.
To put it in another way, when all the data are available in the local Minimongo storage, it still takes a second to render a page after Router.go('posts') is called on a mobile phone. Where does that second come from, and is there a way that I can get rid of it? Could this performance lack come from using iron router instead of flow router? @martijnwalraven do you think you can chime in for one last time?
Edit: After more investigation, the delay happens in between onCreated and onRendered. What could be the reason for a long delay between onCreated and onRendered?