1

I have a problem with flickering - It is not a problem with AngularJS but with, as I think, my architecture. Its not a big problem but it would be nice if I could prevent this fickering.

I have a stateProvider which looks like this: 

controller: 'MyController',
            controllerAs: 'vm',
            resolve: {
                myService: 'myService',
                function(myService, $stateParams) {
                    myService.loadMyDataFromBackend('Parameters');
                },

In this stateProvider data is loaded over a service and this service (myService) then holds the backend- data. In my View I have a ng-repeat which picks up this data from myService:

<tr my-directive-name my-data="vm.getMyDataOverDirectiveAndControllerFromMyService()"

My problem now is the following:

  1. I view data -> everything is fine
  2. I leave the view
  3. I came back to the view: 3.1. old data is viewed for some milliseconds 3.2 new data is loaded from backend and hold in myService 3.3 ng-repeat picks up new data and show it

So 3.1 and 3.2 causes the flickering. Also ng-cloak does not prevent flickering - I guess that ng-cloak checks if (old) data is ok/loaded - the old data is viewed and afterwards new data is received and shown -> ng-cloak in this case has no chance to prevent flickering.

My question now would be if there is any possibility to prevent this flickering in my case?

Thanks a lot!

[EDIT] This is my whole resolver, I would be thankful if someone could give me a hint what do do in order to prevent flickering:

(function() { 'use strict';

angular
    .module('myproject.schedule')
    .config(configure);

configure.$inject = ['$stateProvider']; 

function configure($stateProvider) {

     $stateProvider
        .state(getXYState());

    ////////////

     function (getXYState() {
        var state = {
            name: 'auth.name',
            url: '/my/path',
            templateUrl: 'app/myhtmlpath/myhtml.html',
            controller: 'MyController',
            controllerAs: 'vm',
            resolve: {
                myService: 'myService',
                function(myService, $stateParams, $q) {
                    myService.getData('...');
                }
            }
        }
        return state;
    };
};
})();
quma
  • 5,233
  • 26
  • 80
  • 146
  • use masking when loading a data from a service and unmask it when data is loaded. so it wont look like flickering. – Alhuck Sep 29 '15 at 07:16
  • Delaying AngularJS route change until model loaded to prevent flicker: http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker Have you tried this ? – brute_force Sep 29 '15 at 07:22
  • You should load the data into the model only once it is returned from your service. Check those two questions for more info and examples: [question1](http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker) and [question2](http://stackoverflow.com/questions/21672902/how-to-prevent-screen-flickering-with-angularjs) – Tamy Sep 29 '15 at 10:18

0 Answers0