ngShow load delay issue

All we need is an easy explanation of the problem, so here it is.

I have a menu that slides when some button is cliked, but at beginning this menu is hidden, something like that:

<div ng-show="menuShow">
  my menu here...
</div>

The issue is when the page is loaded the menu is not hidden (probably because the ngShow directive wasn’t loaded) and then they disappears (probably because the ngShow directive was loaded) and making a strange “blink effect” with the menu.

What is the best way to deal with this issue??

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

The quickest and simplest thing to do would be to add the ngCloak directive to the element.

<div ng-show="menuShow" ng-cloak>
  my menu here...
</div>

As long as Angular is loaded synchronously in the head section of the document, this should prevent the flicker.

If you’re not loading Angular synchronously, then according to the docs, you could manually add the CSS to the page:

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

And if this isn’t possible for some reason, you can you just have all the Angular content not in the page on initial load, but included by an ng-include, ng-view or ui-view directive, or custom directive that includes its own template. (This is how I do it, but more for structural reasons)

Method 2

I couldn’t get ng-cloak to work, even when applying the CSS rules, so I ended up using ng-if.
https://docs.angularjs.org/api/ng/directive/ngIf

It results in a bit more overhead as Angular will actually remove the object from the DOM and reload it every time the value of ng-if changes, but in my case this was not very frequent and the overhead was not noticeable.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply