Feature(scope): Improve the libraries language change events to include a loading completed event

[TomasKostadinov]

Is there an existing issue for this?

• [X] I have searched the existing issues

Which Transloco package(s) will this feature affect?

Transloco

Is your feature request related to a problem? Please describe

When switching languages in slow (e.g. mobile) networks I'd like to show a loading modal during the loading of the translation file.

Describe the solution you'd like

I would like to have a simple event fired translationChangeCompleted or translationLoadingCompleted after the translations are available and loaded, independent of the source (cache or network).

Alternatively, the langChanged event can be fired with the context, that no network request needs to be made to load the translation.

Example:

{
  "type": "langChanged",
  "payload": {
    "scope": null,
    "mode": "cache"
    "langName": "de"
  }
}

or

{
  "type": "langChanged",
  "payload": {
    "scope": null,
    "mode": "network"
    "langName": "de"
  }
}

Describe alternatives you've considered

I have read the documentation and wanted to subscribe to the package's events, but the only three events available are , translationLoadFailure, langChanged.

My initially proposed solution was to show the loading spinner right after the user clicks "save", and then wait until langChanged fires, as I assumed that it will fire when the language is available and completetly loaded.

After further reading the documentation, I found out, that:

1. langChanged fires immediately after the language is changed - fine.

2. translationLoadSuccess and translationLoadFailure fire only when a network request has been made and the outcome of this request is clear - fine, understood that.

But what if the language is already in cache? Currently, no event is fired except for langChanged

Additional context

Code example

this.translocoService.events$.subscribe((ev: TranslocoEvents) => {
      console.log(ev);
      switch (ev.type) {
        case "translationLoadSuccess":
        case "translationLoadFailure":
		  // working fine, until the language is already in cache
          this.applicationState.languageLoadingState$.next(false);
          break;
      }
    });

I'm happy about any simple solution (e.g. I don't want to keep track of which languages the user has already loaded in the past, as e.g. fallback languages are always loaded)

I would like to make a pull request for this feature

No

[shaharkazaz]

@TomasKostadinov When the language is cached, why do you need to show a loader?

[TomasKostadinov]

@shaharkazaz I don't want to show the loader, and that's the point, as I can't determine when not to show it

[shaharkazaz]

@TomasKostadinov please share a reproduction of the current solution you have, I think it will be easier to continue from there.

[TomasKostadinov]

@shaharkazaz I have created a simple demo here: https://codesandbox.io/s/interesting-goldwasser-qnnku5?file=/src/app/app.component.ts

I have proposed four solutions to the problem, which all lead to a solution of this issue.

Personally, I'd prefer Option 2, while I think that Option 1 would be the easiest. If you want to enhance the libraries' event cycle drastically, solutions 2-4 can be implemented in parallel, as they are not mutually exclusive.

I hope that this helps, alternatively we can schedule a short call If you're interested.