Optimizing views to help with slow nav transitions

ionic-v1
1

Things with my app are working pretty well. There’s still a persistent memory leak every time I change views, but I can live with it for the time being. My main issue now is how long it takes to transition views with the primary problem coming after I transition from my map view to a child view. When I tap back on the child view, it takes a while to render the map view.

As I understand it, it’s rendering the view before displaying it on screen, which is where the delay comes in. To try and deal with this, I wrapped my longest running code (creating the map and adding markers) inside a document ready call:

angular.element(document).ready(function () {
    ...
});

I thought this might sort of trick it into switching to the view without waiting for the map to render, but no such luck. Transition lag is as long as ever.

Is there another way to do this, to keep long-running tasks from rendering until after the view has transitioned in order to speed up overall app responsiveness?

2

Maybe you can set a var between your controllers with rootscope wich fires all the heavy functions on your controllers.

Lets say you have a view + controller A, and you travel to B.
On ng-click link in the A view, you set a $rootscope.delay of s.

Then on the controller B, you can $watch the rootscope to fire your functions.

Another aproach would be to implement $timeout on your controllers, and the first function is just a $timeout 1000, after which you can initialize said huge functions.

I can’t remember at all if exists some kind of “transitionend” event on ionic, but i can’t find anything.

3

Adding a half second timeout did the trick. I hate using a timeout for that, but my views now transition pretty snappy. Thanks for the tip!

4

no problem man.
I find ugly to use a timeout for that too, but sometimes we need to use that dirty tricks to get what we want xD

Good luck with your app

5

May I reopen the topic here?

I had issues with a view where I load an image from a server.
If the image is cached, the page animation is ok, otherwise it lags because it’s downloading and rendering the image and transitioning the view at the same time.

I looked for a pure CSS solution and while looking at ionic.css, I found ionNavView uses ng-animate (good idea :slight_smile: ) so I was thinking about having the image (the cause of the issue) invisible during the view transition (when class ng-enter is present) like this:

.ng-enter .my-image {
    opacity: 0;
}

And added a fade in to the image to make it nicer then it shows up

.my-image {
    transition: opacity linear 200ms;
}

This fixed my issue! :sunny: The transition to this view nice and smooth, and the added fade in made it even nicer

Thinking of a JS solution that is more elegant than $timeout, I was looking into this: https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

afaik ionNavView is animated by using a CSS class. I’m sure there is a way to listen for that event in the directive and broadcast it so we can register a handler function to render heavy tasks. Don’t have the time to dig into it right now, but if you do and get some answer please share!

One could even $watch for ng-animate attributes and tell when a transition is over I guess…

1 Like