From 0bce9e5452fc5d05123756348dc30308de675bfa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <dev@theaninova.de>
Date: Fri, 19 Aug 2022 14:51:22 +0200
Subject: [PATCH] fix: address late init from ionic components

---
 .../hebis-detail.component.spec.ts            |  4 ++
 src/app/util/ion-icon/replace-util.ts         | 37 +++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts b/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts
index fa62bba4..00912af0 100644
--- a/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts
+++ b/src/app/modules/hebis/hebis-detail/hebis-detail.component.spec.ts
@@ -30,6 +30,8 @@ import {HebisDataProvider} from '../hebis-data.provider';
 import {HebisDetailComponent} from './hebis-detail.component';
 import {Observable, of} from 'rxjs';
 import {StorageProvider} from '../../storage/storage.provider';
+import {IonicModule} from '@ionic/angular';
+import {IonIconModule} from '../../../util/ion-icon/ion-icon.module';
 
 const translations: any = {data: {detail: {TITLE: 'Foo'}}};
 
@@ -75,6 +77,8 @@ describe('HebisDetailComponent', () => {
         RouterModule.forRoot([], {relativeLinkResolution: 'legacy'}),
         HebisRoutingModule,
         HebisModule,
+        IonicModule,
+        IonIconModule,
         TranslateModule.forRoot({
           loader: {provide: TranslateLoader, useClass: TranslateFakeLoader},
         }),
diff --git a/src/app/util/ion-icon/replace-util.ts b/src/app/util/ion-icon/replace-util.ts
index df772a18..ddef712d 100644
--- a/src/app/util/ion-icon/replace-util.ts
+++ b/src/app/util/ion-icon/replace-util.ts
@@ -44,13 +44,21 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
 
   protected slotName = 'sc-icon';
 
+  protected maxAttempts = 10;
+
+  protected retryAfterMs = 10;
+
   /**
    * The host element
    *
    * This will be either element.nativeElement.shadowRoot or element.nativeElement
    * depending on the iconDomLocation
    */
-  protected host: HTMLElement;
+  protected get host() {
+    return this.iconDomLocation === 'shadow'
+      ? this.element.nativeElement.shadowRoot
+      : this.element.nativeElement;
+  }
 
   /**
    * @param element The host element
@@ -85,13 +93,28 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
   }
 
   ngOnInit() {
-    this.host =
-      this.iconDomLocation === 'shadow'
-        ? this.element.nativeElement.shadowRoot
-        : this.element.nativeElement;
-
     this.init();
 
+    if (!this.host) {
+      let tries = 0;
+      console.warn('IconReplacer: host not found, trying again');
+      const interval = setInterval(() => {
+        if (tries > this.maxAttempts) {
+          clearInterval(interval);
+          throw new Error('IconReplacer: host not found');
+        }
+        if (this.host) {
+          clearInterval(interval);
+          this.replace();
+        }
+        tries++;
+      }, this.retryAfterMs);
+    } else {
+      this.attachObserver();
+    }
+  }
+
+  private attachObserver() {
     this.mutationObserver = new MutationObserver(() => this.replace());
     this.mutationObserver.observe(this.host, {
       childList: true,
@@ -139,7 +162,7 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    this.mutationObserver.disconnect();
+    this.mutationObserver?.disconnect();
     this.destroy();
   }
 }