ngShow load delay issue

Question

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??

Answer 1

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.

Answer 2

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)