1 files changed, 24 insertions, 11 deletions
diff --git a/src/lib/Loading/Skeleton.svelte b/src/lib/Loading/Skeleton.svelte
index 3f39beec..5ca3789a 100644
--- a/src/lib/Loading/Skeleton.svelte
+++ b/src/lib/Loading/Skeleton.svelte
@@ -1,12 +1,25 @@
 <script lang="ts">
-  export let count = 3;
-  export let width = '100%';
-  export let height = '100px';
-  export let card = true;
-  export let grid = false;
-  export let list = false;
-  export let pad = false;
-  export let bigCard = false;
+  interface Props {
+    count?: number;
+    width?: string;
+    height?: string;
+    card?: boolean;
+    grid?: boolean;
+    list?: boolean;
+    pad?: boolean;
+    bigCard?: boolean;
+  }
+
+  let {
+    count = 3,
+    width = '100%',
+    height = '100px',
+    card = true,
+    grid = false,
+    list = false,
+    pad = false,
+    bigCard = false
+  }: Props = $props();
 </script>
 
 {#if grid}
@@ -14,7 +27,7 @@
     {#each Array(count) as _, i}
       <div class={card ? `${bigCard ? 'card' : ''} card-small` : ''} style={`width: ${width};`}>
         <div class="skeleton-container" style={`--i: ${i};`}>
-          <div class="skeleton" style={`width: ${width}; height: ${height};`} />
+          <div class="skeleton" style={`width: ${width}; height: ${height};`}></div>
         </div>
       </div>
     {/each}
@@ -26,12 +39,12 @@
       style={`width: ${width}; ${list ? 'padding-top: .75em;' : ''}; --i: ${i};`}
     >
       <div class="skeleton-container">
-        <div class="skeleton" style={`width: ${width}; height: ${height};`} />
+        <div class="skeleton" style={`width: ${width}; height: ${height};`}></div>
       </div>
     </div>
 
     {#if !list && i < count - 1}
-      <p />
+      <p></p>
     {/if}
   {/each}
 {/if}