Hiding untranslated keys

[Meldinoor]

I'm submitting a ... (check one with "x")

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[ ] support request => check the FAQ and search github for a similar issue before submitting
[x] feature request

Current behavior My keys are visible for a brief period before translations are loaded. This has an ugly effect on the loading of my website.

Expected/desired behavior An attribute could be used to show translated elements. My css could for example look like this:

[translate]:not([translated]) { display: none; }

Then when the translated attribute is added the translated text will become visible.

What is the motivation / use case for changing the behavior? To make it simple to hide keys until translation is complete.

[parker-mike]

May be there is an option to hold the loading stage on the screen until translations are loaded? I mean that when the application starts and not functioning yet, the browser shows the contents of the app root tags, so maybe we can use some hooks to load the translations at this stage, so when the app starts rendering the page and replaces the innerHtml it would have the translations and won't show the keys... Is there any way of doing it?

[Meldinoor]

I've implemented my own hack to solve this problem for now, but I don't have the time or the know-how to write proper tests and make a pull-request. This is how I solved it: In translate.directive.js, in the updateValue function, I added one line of code:

_this.setContent(node, _this.key ? node.currentValue : node.originalContent.replace(key, node.currentValue)); node.parentElement.setAttribute('translated', ''); <-- this is what I added _this._ref.markForCheck();

[gitnik]

is there any update on this? Is this expected behaviour that will not be changed or is it something that is under consideration?

[haskelcurry]

Any updates?

[cjkumaresh]

Any updates?