fix: loading issue where apps are hanging sometimes

libs/portal-integration-angular/src/lib/core/utils/caching-translate-loader.utils.ts

@@ -1,7 +1,7 @@
 import { HttpClient } from '@angular/common/http'
 import { TranslateLoader } from '@ngx-translate/core'
 import { TranslateHttpLoader } from '@ngx-translate/http-loader'
-import { filter, first, mergeMap, Observable, of } from 'rxjs'
+import { Observable } from 'rxjs'
 import { TranslationCacheService } from '../../services/translation-cache.service'
 
 export class CachingTranslateLoader implements TranslateLoader {
@@ -17,18 +17,6 @@ export class CachingTranslateLoader implements TranslateLoader {
   getTranslation(lang: string): Observable<any> {
     const url = `${this.prefix}${lang}${this.suffix}`
 
-    return this.translationCache.getTranslationFile(url).pipe(
-      filter((tf) => tf !== null),
-      first(),
-      mergeMap((tf) => {
-        if (tf) {
-          return of(tf)
-        }
-        return this.translationCache.updateTranslationFile(url, null).pipe(
-          mergeMap(() => this.translateLoader.getTranslation(lang)),
-          mergeMap((t) => this.translationCache.updateTranslationFile(url, t))
-        )
-      })
-    )
+    return this.translationCache.getTranslationFile(url, () => this.translateLoader.getTranslation(lang))
   }
 }

libs/portal-integration-angular/src/lib/services/translation-cache.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, OnDestroy } from '@angular/core'
 import { SyncableTopic } from '@onecx/accelerator'
-import { Observable, concat, first, from, map, mergeMap, of } from 'rxjs'
+import { BehaviorSubject, Observable, filter, first, map, of, race, tap, withLatestFrom } from 'rxjs'
 
 // This topic is defined here and not in integration-interface, because
 // it is not used as framework independent integration but for improving
@@ -13,29 +13,51 @@ class TranslationCacheTopic extends SyncableTopic<Record<string, any>> {
 
 @Injectable({ providedIn: 'root' })
 export class TranslationCacheService implements OnDestroy {
-  translationCache$ = new TranslationCacheTopic()
-
-  ngOnDestroy(): void {
-    this.translationCache$.destroy()
-  }
-
-  getTranslationFile(url: string): Observable<any> {
-    return this.getCache().pipe(map((t) => t[url]))
+  private translationTopic$ = new TranslationCacheTopic()
+  private translations$ = new BehaviorSubject<any>({})
+  constructor() {
+    this.translationTopic$
+      .pipe(
+        withLatestFrom(this.translations$),
+        map(([topicTranslations, translations]) => {
+          let foundValueOthersDoNotKnow = false
+          const newTranslations = { ...translations }
+          Object.keys(topicTranslations).forEach((k) => {
+            if (!topicTranslations[k] && translations[k]) {
+              foundValueOthersDoNotKnow = true
+            }
+            newTranslations[k] ??= topicTranslations[k]
+          })
+          return [newTranslations, foundValueOthersDoNotKnow]
+        }),
+        tap(([newTranslations, foundValueOthersDoNotKnow]) => {
+          if (foundValueOthersDoNotKnow) {
+            this.translationTopic$.publish(newTranslations)
+          }
+        }),
+        map(([newTranslations]) => newTranslations)
+      )
+      .subscribe(this.translations$)
   }
-
-  updateTranslationFile(url: string, translations: any): Observable<any> {
-    return this.getCache().pipe(
-      first(),
-      mergeMap((t) => {
-        return from(this.translationCache$.publish({ ...t, [url]: translations })).pipe(map(() => translations))
-      })
-    )
+  ngOnDestroy(): void {
+    this.translationTopic$.destroy()
   }
 
-  private getCache(): Observable<Record<string, any>> {
-    if (this.translationCache$.getValue()) {
-      return this.translationCache$.asObservable()
+  getTranslationFile(url: string, cacheMissFunction: () => Observable<any>): Observable<any> {
+    if (this.translations$.value[url]) {
+      return of(this.translations$.value[url])
     }
-    return concat(of({}), this.translationCache$.asObservable())
+    this.translationTopic$.publish({ ...this.translations$.value, [url]: null })
+    return race(
+      this.translations$.pipe(
+        filter((t) => t[url]),
+        map((t) => t[url])
+      ),
+      cacheMissFunction().pipe(
+        tap((t) => {
+          this.translationTopic$.publish({ ...this.translations$.value, [url]: t })
+        })
+      )
+    ).pipe(first())
   }
 }