From bc97ce5e1b69669d17f3ad13aaeb774b05c09c80 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 26 Aug 2023 10:19:37 -0700
Subject: [PATCH] fix(skeleton-text): fix reactivity in `paragraph` variant
 (#1794)

Fixes #1793
---
 src/SkeletonText/SkeletonText.svelte | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/SkeletonText/SkeletonText.svelte b/src/SkeletonText/SkeletonText.svelte
index f2c95db0..9b8d7d64 100644
--- a/src/SkeletonText/SkeletonText.svelte
+++ b/src/SkeletonText/SkeletonText.svelte
@@ -13,24 +13,21 @@
 
   const RANDOM = [0.973, 0.153, 0.567];
 
-  $: rows = [];
   $: widthNum = parseInt(width, 10);
   $: widthPx = width.includes("px");
-  $: if (paragraph) {
-    for (let i = 0; i < lines; i++) {
-      const min = widthPx ? widthNum - 75 : 0;
-      const max = widthPx ? widthNum : 75;
-      const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
-      rows = [...rows, { width: widthPx ? rand : `calc(${width} - ${rand})` }];
-    }
-  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
 {#if paragraph}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave>
-    {#each rows as { width }}
+    {#each Array.from({ length: lines }).map((_, i) => {
+      const min = widthPx ? widthNum - 75 : 0;
+      const max = widthPx ? widthNum : 75;
+      const rand = Math.floor(RANDOM[i % 3] * (max - min + 1)) + min + "px";
+
+      return widthPx ? rand : `calc(${width} - ${rand})`;
+    }) as width}
       <p
         class:bx--skeleton__text="{true}"
         class:bx--skeleton__heading="{heading}"