Wait for translate to be loaded before displaying

Hello people,

I want to wait for the translation to be ready before displaying the page - to avoid the bad UX where the text is flickering when first launching the app.

I was using the filter, like that :

{{'tabs.gallery' | translate}}

And transformed it to use the service instead :

$translate(['tabs.wall', 'tabs.gallery']).then(function (translations) {
    $scope.tabsWall = translations['tabs.wall'];
    $scope.tabsGallery = translations['tabs.gallery'];
});

It didn’t work, and I understood why by looking at the docs :

$translate service works asynchronously, which means it returns the translation for the given translation id, as soon as it could determine it. If it doesn't exist it'll probably just return the translation id.

So I also tried to use the directive, didn’t help. I added $translate.onReady before using the service, didn’t work. I tried to use translate-cloak, didn’t work. Wanted to use the resolve of the ui router’s state… Didn’t find a way to do that efficiently either. I could potentially use in that resolve :

$rootScope.$on('$translateChangeSuccess', function () {
    deferred.resolve(true);
});

BUT then of course it works only on the first load of the page, and it seems very inaccurate to me.

Sooooo any help ?

Thanks !

[rdesoky]

@JerryBels, make sure that you call $translate() after $translate.use(/lang_id/) returned promise has been resolved.

[rdesoky]

@JerryBels I am glad that I could help