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

April 18, 2014 | 1 Minute Read

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:

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

Found any of this Stuff Helpful?

If you found any this helpful and want to show some love, you can always buy me a coffee!