how to prevent handlebars "{{}}" from appearing in the UI in an AngularJs Application before actual data loads?

Question

I have a page, Whose layout is generated based the GET request that returns an array with length in 10000s. So, until the actual that bind to some of the components load, I get the ugly :

{{ binding-model }}

This creates a shabby look and feel and I am getting feedback from my users complaining about this. Isn't there a way to prevent this? Can't the binding object simply appear as "blank" until the actual data loads? Here is a split second snapshot of my application screen when this monstrosity appears :

Is there a fix for this?

Answer 1

Look into this directive: https://docs.angularjs.org/api/ng/directive/ngCloak

hope it helps.