Angular Universal ngx-translate on page load flickers from default language and then switches to other selected language

Question

I have a site with 2 languages English and Hindi, which is done in ngx-translate angular 14. For SEO purpose I have added angular universal which is server side rendering, but when I switch from English to Hindi and I reload the page then page first loads English content then it switches to json keys and then it will load Hindi.

I need to load Hindi directly without any flickering. I tried almost all the links in the stack overflow did not work. I tried to install ngx-translate-cache but it is not compatible with angular 14 version. How do I resolve this issue?

Answer 1

You can use the use method and wait for it like this:

....
 translate.use(langToSet).subscribe(() => {
        console.info(`Successfully initialized '${langToSet}' language.'`);
        this.loading = false;
      }, err => {
        console.error(`Problem with '${langToSet}' language initialization.'`);
      }, () => {
        resolve(null);
      });
....

Then make a loading screen and work with ng-if. If all initialized, set a variable like loading to false and show your content

<div *ng-if="loading">Loading...</div>
<div *ng-if="!loading">Your content</div>

That is the common way, you can see here.