Rendering view content after transition animation is finished (for better responsiveness)

ionic-v1
1

Hi,

Is there a way to render view content after the state transition is finished (I mean the animation)?

Some of our views are quite big and take a bit time to render. On some devices after touching the button we have around 2-3 second freeze before the transition starts. We managed to fix this issue using $timeout with 500ms delay but I don’t think it’s the best approach to do it…

1 Like
2

where did you add the delay? i tried putting it on top of the controller and delay all the codes in that controller but seems no difference.

agree the views should be rendered after the transition animation… hope the ionic team will consider it in the next release…

3

Exactly, this is what we do more or less right now (really short and quick fix):

angular.module("app")
.controller "FooController", ->
  $timeout ->
    $scope.renderContent = true
  , 500

ion-view
  .content.loading-content(ng-if="!renderContent")
    i.ion-loading-c
  ion-content(ng-if="renderContent")
    # all other stuff that will be rendered into DOM after 500ms

But it would be much better if we could just use some $scope.$on("$viewAnimationFinished") instead of just hardcoded 500ms, which might be too long for faster devices, like iOS 7.

Without this “fix”, we have huge delays (0.3s-1s) after clicking on any links on slower devices (Android, iOS6), which is caused by rendering the whole content’s view.
Before we will be able to somehow “prerender” the DOM into cache before the animation, I think this is the only way to make the application faster on those slower devices.

1 Like
4

I am trying to achieve the same thing with some heavy views with multiple ng-repeats. Transitioning to the view before loading the content just makes the app seem so much more responsive to the user’s interactions - I really hope the Ionic devs will consider adding a better way to achieve this!

Right now, I’m playing around $stateChangeSuccess, which seems to work initially:

.controller('someCtrl', function($scope) {
    $scope.$on('$stateChangeSuccess', function(){
        */ Load content from services and show ion-content */
    }
})

Any thoughts on this solution?

EDIT: This only seems to work some of the time. It seems $stateChangeSuccess is not consistently fired after the transition, but may occasionally be fired before?

1 Like
5

Anything new on this? I need this functionality. The transition is laggy because of the combination of ng-repeat and slide boxes.

I tried a timeout, but when I use that the ion-slides are not displayed (though they are in the DOM)

6

Have a look at the View LifeCycle and Events, it was added in beta.14 and is the solution to this problem. Specifically you will be interested in listening for the ‘$ionicView.afterEnter’ event.