[SOLVED] locale filter in AngularJS - how to compensate for render delay?

locale filter in AngularJS - how to compensate for render delay?

I wrote a simple i18n localization function using filters, but there is a delay when applying the filter. The user will see "{{'formTitle' |i18n}}" briefly before the filter is applied and the text swapped. Is there any way around this?

This is a sample of the code, it's very simple and fairly common:

<label for="person_title">{{'formTitle' | i18n}}</label>

angular.module('localization')
.value('localizedTexts', {
    'formTitle': 'Titre '
});

angular.module('localization', [])
.filter('i18n', ['localizedTexts', function (localizedTexts) {
return function (text) {
    if (localizedTexts.hasOwnProperty(text)) {
        return localizedTexts[text];
    }
    return text;
};

Solution

Consider using ng-cloak. Quoted from the AngularJS doc:

When this css rule is loaded by the browser, all html elements (including their children) that are tagged with the ng-cloak directive are hidden. When Angular comes across this directive during the compilation of the template it deletes the ngCloak element attribute, which makes the compiled element visible.

For the best result, angular.js script must be loaded in the head section of the html file; alternatively, the css rule (above) must be included in the external stylesheet of the application.