Quick Tip – 15: How to Fix ng-cloak Flicker in AngularJS

Apr182014

The ng-cloak directive was added to Angular in order to prevent the flickering of elements before your application has fully loaded. It then removes ng-cloak once it has had a chance to compile your views. However, there is still a flicker issue that occurs between when the view is first loaded and before Angular has had a chance to run.

How ng-cloak Works

The way that ng-cloak works is to add display: none !important to items using it. The following code comes directly from the angular.js source file:

1

2

3

4

5

6

7

8

[ng:cloak],

[ng-cloak],

[data-ng-cloak],

[x-ng-cloak],

.ng-cloak,

.x-ng-cloak {

display:none!important;

}

So, What’s the Problem?

The problem is that the style used to hide these items is included in the JavaScript file which takes a second to initialize. In this time period the CSS will not be parsed by the browser.

The Fix

It is only a brief flicker but it is still undesired. Fortunately the fix is a very simple one. All you need to do is add the above CSS somewhere in your application stylesheet. That’s all there is to it.