AngularJS waiting for ajax reponse with .then doesnt work as expected

Question

In my app i want to check if user is logged in , so i can enable or disable buttons in menu. I can do it in a simple way, but then i get a problem that menu makes a "blink" where users will see some menu items until reponse from ajax is there.

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  $http.get('api/users/userLoggedIn').then(function(data){
        console.log(data);
        $scope.userLoggedIn = data;
    });
});

thats what i came up with, if i folow documentation .then shold make a promise and wait for reponse from ajax call before my page will load, but thats not what happening, the "blink" is still hapening.

Any ideas how to solve this?

i cant do this because menu is inside a separate controller on master page. — Timsen, Jul 02 '14 at 01:44

score 0 · Answer 1 · edited May 23 '17 at 10:26

You should hide all the menu items and then show them after the response comes back.

You can then put a loader gif while the call is happening. There is a great post about that here

So what the user will see is a blank menu with a loader gif, then once the response comes back the correct menu items will be shown.

Blank content + loader gif is typically how this problem is solved as it is preferable to a FOUC (flash of un-styled content)

Hope this helps.

AngularJS waiting for ajax reponse with .then doesnt work as expected

1 Answers1