fix(app): text-shimmer undefined length (#16475)

1 files changed, 7 insertions, 9 deletions

diff --git a/packages/ui/src/components/text-shimmer.tsx b/packages/ui/src/components/text-shimmer.tsx
index 5d3dee1eb..0d797e5c1 100644
--- a/packages/ui/src/components/text-shimmer.tsx
+++ b/packages/ui/src/components/text-shimmer.tsx
@@ -8,6 +8,7 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
   active?: boolean
   offset?: number
 }) => {
+  const text = createMemo(() => props.text ?? "")
   const active = createMemo(() => props.active ?? true)
   const offset = createMemo(() => props.offset ?? 0)
   const [run, setRun] = createSignal(active())
@@ -36,17 +37,14 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
     clearTimeout(timer)
   })
 
-  const shimmerSize = createMemo(() => {
-    const len = Math.max(props.text.length, 1)
-    return Math.max(300, Math.round(200 + 1400 / len))
-  })
+  const len = createMemo(() => Math.max(text().length, 1))
+  const shimmerSize = createMemo(() => Math.max(300, Math.round(200 + 1400 / len())))
 
   // duration = len × (size - 1) / velocity → uniform perceived sweep speed
   const VELOCITY = 0.01375 // ch per ms, ~10% faster than original 0.0125 baseline
   const shimmerDuration = createMemo(() => {
-    const len = Math.max(props.text.length, 1)
     const s = shimmerSize() / 100
-    return Math.max(1000, Math.min(2500, Math.round((len * (s - 1)) / VELOCITY)))
+    return Math.max(1000, Math.min(2500, Math.round((len() * (s - 1)) / VELOCITY)))
   })
 
   return (
@@ -55,7 +53,7 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
       data-component="text-shimmer"
       data-active={active() ? "true" : "false"}
       class={props.class}
-      aria-label={props.text}
+      aria-label={text()}
       style={{
         "--text-shimmer-swap": `${swap}ms`,
         "--text-shimmer-index": `${offset()}`,
@@ -65,10 +63,10 @@ export const TextShimmer = <T extends ValidComponent = "span">(props: {
     >
       <span data-slot="text-shimmer-char">
         <span data-slot="text-shimmer-char-base" aria-hidden="true">
-          {props.text}
+          {text()}
         </span>
         <span data-slot="text-shimmer-char-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
-          {props.text}
+          {text()}
         </span>
       </span>
     </Dynamic>