refactor(segment-button): update when the errors are displayed

Author: thetaPC

core/src/components/segment-button/segment-button.tsx

@@ -2,7 +2,7 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { addEventListener, removeEventListener, inheritAttributes, getNextSiblingOfType } from '@utils/helpers';
+import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -65,58 +65,40 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     this.updateState();
   }
 
-  private waitForSegmentContent(ionSegment: HTMLIonSegmentElement | null, contentId: string): Promise<HTMLElement> {
-    return new Promise((resolve, reject) => {
-      let timeoutId: NodeJS.Timeout | undefined = undefined;
-      let animationFrameId: number;
-
-      const check = () => {
-        if (!ionSegment) {
-          reject(new Error(`Segment not found when looking for Segment Content`));
-          return;
-        }
-
-        const segmentView = getNextSiblingOfType<HTMLIonSegmentViewElement>(ionSegment); // Skip the text nodes
-        const segmentContent = segmentView?.querySelector(
-          `ion-segment-content[id="${contentId}"]`
-        ) as HTMLIonSegmentContentElement | null;
-        if (segmentContent && timeoutId) {
-          clearTimeout(timeoutId); // Clear the timeout if the segmentContent is found
-          cancelAnimationFrame(animationFrameId);
-          resolve(segmentContent);
-        } else {
-          animationFrameId = requestAnimationFrame(check); // Keep checking on the next animation frame
-        }
-      };
-
-      check();
-
-      // Set a timeout to reject the promise
-      timeoutId = setTimeout(() => {
-        cancelAnimationFrame(animationFrameId);
-        reject(new Error(`Unable to find Segment Content with id="${contentId} within 1000 ms`));
-      }, 1000);
-    });
-  }
-
-  async connectedCallback() {
+  connectedCallback() {
     const segmentEl = (this.segmentEl = this.el.closest('ion-segment'));
     if (segmentEl) {
       this.updateState();
       addEventListener(segmentEl, 'ionSelect', this.updateState);
       addEventListener(segmentEl, 'ionStyle', this.updateStyle);
     }
+  }
+
+
+
+  disconnectedCallback() {
+    const segmentEl = this.segmentEl;
+    if (segmentEl) {
+      removeEventListener(segmentEl, 'ionSelect', this.updateState);
+      removeEventListener(segmentEl, 'ionStyle', this.updateStyle);
+      this.segmentEl = null;
+    }
+  }
+
+  componentWillLoad() {
+    this.inheritedAttributes = {
+      ...inheritAttributes(this.el, ['aria-label']),
+    };
 
     // Return if there is no contentId defined
     if (!this.contentId) return;
 
-    let segmentContent;
-    try {
-      // Attempt to find the Segment Content by its contentId
-      segmentContent = await this.waitForSegmentContent(segmentEl, this.contentId);
-    } catch (error) {
-      // If no associated Segment Content exists, log an error and return
-      console.error('Segment Button: ', (error as Error).message);
+    // Attempt to find the Segment Content by its contentId
+    const segmentContent = document.getElementById(this.contentId) as HTMLIonSegmentContentElement | null;
+
+    // If no associated Segment Content exists, log an error and return
+    if (!segmentContent) {
+      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
       return;
     }
 
@@ -133,21 +115,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
     }
   }
 
-  disconnectedCallback() {
-    const segmentEl = this.segmentEl;
-    if (segmentEl) {
-      removeEventListener(segmentEl, 'ionSelect', this.updateState);
-      removeEventListener(segmentEl, 'ionStyle', this.updateStyle);
-      this.segmentEl = null;
-    }
-  }
-
-  componentWillLoad() {
-    this.inheritedAttributes = {
-      ...inheritAttributes(this.el, ['aria-label']),
-    };
-  }
-
   private get hasLabel() {
     return !!this.el.querySelector('ion-label');
   }