fix(header,footer): guard fade and condense setup against concurrent teardown

Author: OS-susmitabhowmik

core/src/components/footer/footer.tsx

@@ -34,6 +34,7 @@ export class Footer implements ComponentInterface {
   private scrollHideCtrlPromise: Promise<ScrollHideController> | null = null;
   private hasWarnedCollapse = false;
   private activeEffect?: string;
+  private fadeSetupToken: object | null = null;
 
   @State() private keyboardVisible = false;
 
@@ -187,7 +188,16 @@ export class Footer implements ComponentInterface {
   };
 
   private setupFadeFooter = async (contentEl: HTMLElement) => {
-    const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+    const token = {};
+    this.fadeSetupToken = token;
+
+    const scrollEl = await getScrollElement(contentEl);
+
+    if (this.fadeSetupToken !== token) {
+      return;
+    }
+
+    this.scrollEl = scrollEl;
 
     /**
      * Handle fading of toolbars on scroll
@@ -202,6 +212,7 @@ export class Footer implements ComponentInterface {
 
   private destroyCollapsibleFooter() {
     this.activeEffect = undefined;
+    this.fadeSetupToken = null;
     this.scrollHideCtrlPromise = null;
 
     if (this.scrollHideCtrl) {

core/src/components/header/header.tsx

@@ -45,6 +45,7 @@ export class Header implements ComponentInterface {
   private scrollHideCtrlPromise: Promise<ScrollHideController> | null = null;
   private hasWarnedCollapse = false;
   private activeEffect?: string;
+  private fadeCondenseSetupToken: object | null = null;
 
   @Element() el!: HTMLElement;
 
@@ -186,7 +187,16 @@ export class Header implements ComponentInterface {
   };
 
   private setupFadeHeader = async (contentEl: HTMLElement, condenseHeader: HTMLElement | null) => {
-    const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
+    const token = {};
+    this.fadeCondenseSetupToken = token;
+
+    const scrollEl = await getScrollElement(contentEl);
+
+    if (this.fadeCondenseSetupToken !== token) {
+      return;
+    }
+
+    this.scrollEl = scrollEl;
 
     /**
      * Handle fading of toolbars on scroll
@@ -201,6 +211,7 @@ export class Header implements ComponentInterface {
 
   private destroyCollapsibleHeader() {
     this.activeEffect = undefined;
+    this.fadeCondenseSetupToken = null;
     this.scrollHideCtrlPromise = null;
 
     if (this.scrollHideCtrl) {
@@ -233,7 +244,16 @@ export class Header implements ComponentInterface {
       return false;
     }
 
-    this.scrollEl = await getScrollElement(contentEl);
+    const token = {};
+    this.fadeCondenseSetupToken = token;
+
+    const scrollEl = await getScrollElement(contentEl);
+
+    if (this.fadeCondenseSetupToken !== token) {
+      return false;
+    }
+
+    this.scrollEl = scrollEl;
 
     /**
      * The condense effect requires an ion-title with size="large"