MOBILE-3814 fab: Use dom promises before calculating heights

src/core/directives/fab.ts

@@ -13,7 +13,8 @@
 // limitations under the License.
 
 import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
-import { CoreUtils } from '@services/utils/utils';
+import { CoreCancellablePromise } from '@classes/cancellable-promise';
+import { CoreDomUtils } from '@services/utils/dom';
 
 /**
  * Directive to move ion-fab components as direct children of the nearest ion-content.
@@ -30,6 +31,7 @@ export class CoreFabDirective implements OnInit, OnDestroy {
     protected element: HTMLElement;
     protected content?: HTMLIonContentElement | null;
     protected initialPaddingBottom = 0;
+    protected domPromise?: CoreCancellablePromise<void>;
 
     constructor(el: ElementRef) {
         this.element = el.nativeElement;
@@ -39,15 +41,31 @@ export class CoreFabDirective implements OnInit, OnDestroy {
     /**
      * @inheritdoc
      */
-    async ngOnInit(retries = 3): Promise<void> {
+    async ngOnInit(): Promise<void> {
-        this.content = this.element.closest('ion-content');
+        this.domPromise = CoreDomUtils.waitToBeInDOM(this.element);
-        if (!this.content) {
+        await this.domPromise;
-            if(retries > 0) {
-                await CoreUtils.nextTicks(50);
 
-                this.ngOnInit(retries - 1);
+        this.content = this.element.closest('ion-content');
+
+        if (!this.content) {
+            return;
         }
 
+        // Add space at the bottom to let the user see the whole content.
+        this.initialPaddingBottom = parseFloat(this.content.style.getPropertyValue('--padding-bottom') || '0');
+
+        await this.calculatePlace();
+
+        CoreDomUtils.onElementSlot(this.element, () => {
+            this.calculatePlace();
+        });
+    }
+
+    /**
+     * Calculate the height of the footer.
+     */
+    protected async calculatePlace(): Promise<void> {
+        if (!this.content) {
             return;
         }
 
@@ -58,8 +76,6 @@ export class CoreFabDirective implements OnInit, OnDestroy {
             this.content.appendChild(this.element);
         }
 
-        // Add space at the bottom to let the user see the whole content.
-        this.initialPaddingBottom = parseFloat(this.content.style.getPropertyValue('--padding-bottom') || '0');
         this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom + initialHeight + 'px');
     }
 
@@ -70,6 +86,7 @@ export class CoreFabDirective implements OnInit, OnDestroy {
         if (this.content) {
             this.content.style.setProperty('--padding-bottom', this.initialPaddingBottom + 'px');
         }
+        this.domPromise?.cancel();
     }
 
 }