refactor: update element creation to use await for asynchronous helpers

Author: ngocjohn

src/components/shared/vsc-tire-card.ts

@@ -32,6 +32,7 @@ export class VehicleTireCard extends BaseElement {
   constructor() {
     super();
   }
+
   connectedCallback(): void {
     super.connectedCallback();
   }
@@ -114,13 +115,13 @@ export class VehicleTireCard extends BaseElement {
     return element;
   }
 
-  private async _rebuildElement(elToReplace: LovelaceElement, config: LovelaceElementConfig): Promise<void> {
+  private _rebuildElement = async (elToReplace: LovelaceElement, config: LovelaceElementConfig): Promise<void> => {
     const newCardEl = await this._createElement(config);
     if (elToReplace.parentElement) {
       elToReplace.parentElement.replaceChild(newCardEl, elToReplace);
     }
     this._elements = this._elements!.map((curCardEl) => (curCardEl === elToReplace ? newCardEl : curCardEl));
-  }
+  };
   static get styles(): CSSResultGroup {
     return [super.styles, css``];
   }

src/utils/lovelace/create-card-element.ts

@@ -55,7 +55,7 @@ export const loadVerticalStackCard = async (): Promise<void> => {
   }
 
   if (!customElements.get(VERTICAL_STACK_TAG)) {
-    helpers.createCardElement({
+    await helpers.createCardElement({
       type: 'vertical-stack',
       cards: [],
     });
@@ -104,7 +104,7 @@ export const loadPictureCardHelper = async (hass: HomeAssistant): Promise<void>
 };
 
 export async function createHuiElement(elementConfig: LovelaceElementConfig): Promise<LovelaceElement> {
-  const element = (await helpers.createHuiElement(elementConfig)) as LovelaceElement;
+  const element = await helpers?.createHuiElement(elementConfig);
   if (element.tagName !== 'HUI-CONDITIONAL-ELEMENT') {
     element.classList.add('element');
   }