title: AngularJS state change using ui-router causing flickering on UI
body: <p>I have a very simple two page app and when navigating from listing page to details page, there is a very distinct flicker caused due to hide/show of the UI components. Attached is a screenshot where you can see both UIs visible at the time of transition (at the top is the details UI and at the bottom is the list UI)!</p>
  
  <p><a href="https://i.stack.imgur.com/us846.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/us846.png" alt="enter image description here"></a></p>
  
  <p>I am using ui-router for navigation.</p>
  
  <p><code>function routingConfig($stateProvider, $urlRouterProvider, $locationProvider, applicationPathProvider) {
      $stateProvider
          .state('activities', {
            url: applicationPathProvider.getBase(),
            views: {
              '': {
                templateUrl: '/js/activity/activityList.partial.html',
                controller: 'ActivityListController',
                controllerAs: 'activityListController',
                resolve: {
                  activitiesResponse: function(activityListService) {
                    return activityListService.listActivities();
                  }
                },
                ncyBreadcrumb: {
                  parent: '',
                  label: 'Activity List'
                }
              }
            }
          })
          .state('activityDetails', {
              url : applicationPathProvider.getPath('activityDetails'),
              templateUrl : '/js/activity/activityDetails/activityDetails.partial.html',
              controller : 'ActivityDetailsController',
              controllerAs: 'activityDetailsController',
              resolve: {
                  activityDetailsResponse: function($state, $stateParams, activityListService) {
                      return activityListService.getTasksForActivity($stateParams.activityId);
                  }
              },
              ncyBreadcrumb: {
                  parent: 'activities',
                  label : '{{activityDetailsController.selectedActivityText}}'
              }
          })
      ;
      $locationProvider.html5Mode(true);
      $urlRouterProvider.otherwise(applicationPathProvider.getBase());
    }
  </code></p>
  
  <p>Here is the service code which sends a REST call and creates a data structure which controller uses.</p>
  
  <pre><code>function getTasksForActivity(activityId) {
    var deferred = $q.defer();
    Restangular.one("activities", activityId).customGET("tasks")
        .then(function (restangularTasks) {
          deferred.resolve(buildValidTasksResponse(restangularTasks.plain()));
        }, buildErrorTasksResponse);
  
    return deferred.promise;
  
  }
  </code></pre>
  
  <p>Here is the code for page 1 (the list page)</p>
  
  <pre><code>    &lt;div class="sl-artefact-plans" layout="row" flex&gt;
    &lt;div class="sl-artefact-list-container" layout="column" style="width: 100%"&gt;
      &lt;div class='list_table'&gt;
        &lt;div class='list_row' ng-repeat="activity in activityListController.activities | orderBy:sortType:sortReverse"&gt;
          &lt;div class='list_cell overflow td'&gt;
            &lt;a ui-sref="activityDetails({activityId: activity.id})"
               ng-click="activityListController.setSelectedActivityInService(activity)"&gt;
              {{activity.summary}}
            &lt;/a&gt;
          &lt;/div&gt;
          &lt;div class='list_cell td' ng-bind="activity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'"&gt;
          &lt;/div&gt;
          &lt;div class='list_cell td' ng-bind="activity.status"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is page 2:</p>
  
  <pre><code>    &lt;div class="sl_artifact_details_header_bar"&gt;
    &lt;div class="sl_artifact_details_heading"&gt;
      {{activityDetailsController.selectedActivityText}}
    &lt;/div&gt;
    &lt;div class="sl_artifact_details_info"&gt;
          &lt;span ng-class="activityDetailsController.selectedActivityStatus"
                style="vertical-align:middle; margin:0px 0px 0px -3px"&gt;
          {{activityDetailsController.selectedActivity.dueBy | date:'MM/dd/yyyy h:mm a' : 'UTC'}}&lt;/span&gt;
      &lt;span style="padding-left: 10px"&gt;{{activityDetailsController.selectedActivity.status}}&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;table&gt;
      &lt;tr ng-repeat="task in activityDetailsController.tasks"&gt;
          &lt;td ng-bind="task.summary"&gt;&lt;/td&gt;
          &lt;td ng-bind="task.status"&gt;&lt;/td&gt;
          &lt;td ng-bind="task.dueBy"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>This is a very simple use-case and I am quite confused as to why is this occurring and how to resolve this.</p>
  
  <p>Any pointers will help. Thanks.</p>