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

Clown

#14069211 – Overpraise

Answer 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)

Betulaceous

Hi! I've run into the exact same problem, however both options in your answer didn't work for me :( any ideas? #30540619 – Pyridine

Great answer because of the synchronously differentiation. In my case angular is not loaded in the head section so I had to add the CSS class manually. – Introrse

Answer 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.

Zack