How to remove delay from ngShow initialization? When ng-cloak fails?

Question

I\'ve run into the exact same problem found in this question. However both answers did not work in my case.

Video of my problem: https://www.youtube.com/watch?v=Byjmwmam

Answer 1

I know this has been answered, but I have another solution.

Using the bootstrap.css:

<div class="collapse" ng-class="{'collapse': [falsy after ng evaluates] }"

This will remove the collapse class if required, but it will start off as hidden until angular can evaluate it.

Otherwise use any class that sets display:none, and remove it with ng-class.

Answer 2

To make a div hidden by default and prevent it from being shown before the page is completely loaded, you can add ng-hide to class attribute. E.g.:

<div ng-show="searchPopoverDisplay ng-hide" class="search-popover" ng-cloak>

Answer 3

Hide them by default in css, then override when angular loads. The 3-4 second delay could be the time it's taking to fetch and load angular amidst all the other requests you're making (you should check your network panel).

.display-on {
    display: block !important;
    opacity: 1 !important;
}

---

ng-class="{'display-on': searchPopoverDisplay}"