Fix: expander-sub-card loading times

src/Card.svelte

@@ -12,44 +12,38 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 -->
-<svelte:options customElement="expander-sub-card" />
+<!-- eslint-disable-next-line svelte/valid-compile -->
+<svelte:options customElement='expander-sub-card' />
 
 <script lang="ts">
     import type { HomeAssistant, LovelaceCardConfig } from 'custom-card-helpers';
-    import { cardUtil } from './cardUtil';
+    import { getCardUtil } from './cardUtil.svelte';
+    import { onMount } from 'svelte';
 
-    export let type = 'div';
-    export let config: LovelaceCardConfig;
-    export let hass: HomeAssistant;
+    const {
+        type = 'div',
+        config,
+        hass
+    }: { type: string; config: LovelaceCardConfig; hass: HomeAssistant; self: HTMLElement } = $props();
 
-    let loading = true;
-    const uplift = (
-        node: HTMLElement,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        p: { type: string; hass: HomeAssistant }
-    ) => ({
-        // eslint-disable-next-line no-shadow
-        update: (p: { type: string; hass: HomeAssistant }) => {
-            if (node) {
-                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                if ((node.firstChild as any)?.tagName) {
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    (node.firstChild as any).hass = p.hass;
-                    return;
-                }
-                void (async () => {
-                    const el = (await cardUtil).createCardElement(config);
-                    el.hass = p.hass;
-                    node.innerHTML = '';
-                    node.appendChild(el);
-                    loading = false;
-                })();
-            }
+    let container = $state<HTMLElement>();
+    let loading = $state(false);
+
+    onMount(async () => {
+        const util = await getCardUtil();
+        const el = util.createCardElement(config);
+        el.hass = hass;
+        if (!container) {
+            console.error('container doesn\'t exist');
+            return;
         }
+        container.innerHTML = '';
+        container.appendChild(el);
+        loading = false;
     });
 </script>
 
-<div use:uplift={{ type, hass }} ></div>
+<svelte:element this={type} bind:this={container}/>
 {#if loading}
     <span style={'padding: 1em; display: block; '}> Loading... </span>
 {/if}

src/cardUtil.ts → src/cardUtil.svelte.ts

@@ -18,5 +18,18 @@ export interface CardUtil {
     createCardElement: (config: LovelaceCardConfig) => LovelaceCard;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const cardUtil: Promise<CardUtil> = (() => ((window as any).loadCardHelpers() as Promise<any>).then((v) => v))();
+let cardUtil: CardUtil|undefined = $state(undefined);
+export const loadCardUtil = async (): Promise<CardUtil> => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    cardUtil = await (window as any).loadCardHelpers().then((v: any) => v);
+    return cardUtil as CardUtil;
+};
+
+export const getCardUtil = () => {
+    if (!cardUtil) {
+        return loadCardUtil();
+    }
+    return cardUtil;
+};
+
+// export const cardUtil: Promise<CardUtil> = (() => ((window as any).loadCardHelpers() as Promise<any>).then((v) => v))();

src/index.ts

@@ -12,7 +12,7 @@ limitations under the License.
 */
 export { default as default } from './ExpanderCard.svelte';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { cardUtil } from './cardUtil';
+import { cardUtil } from './cardUtil.svelte';
 // Make Typescript Happy!
 declare global {
     interface Window {

tsconfig.json

@@ -10,6 +10,7 @@
 		"sourceMap": true,
 		"strict": true,
         "module": "esnext",
+        "lib": ["es2019", "dom"],
         "moduleResolution": "bundler"
 	},
     "include": ["src/**/*"],