fix: desktop layout

3 files changed, 30 insertions, 13 deletions

diff --git a/packages/ui/src/components/spinner.tsx b/packages/ui/src/components/spinner.tsx
index 5e787d86b..41f4d9e71 100644
--- a/packages/ui/src/components/spinner.tsx
+++ b/packages/ui/src/components/spinner.tsx
@@ -1,14 +1,16 @@
 import { ComponentProps, For } from "solid-js"
 
-export function Spinner(props: { class?: string; classList?: ComponentProps<"div">["classList"] }) {
-  const squares = Array.from({ length: 16 }, (_, i) => ({
-    id: i,
-    x: (i % 4) * 4,
-    y: Math.floor(i / 4) * 4,
-    delay: Math.random() * 3,
-    duration: 2 + Math.random() * 2,
-  }))
+const outerIndices = new Set([0, 1, 2, 3, 4, 7, 8, 11, 12, 13, 14, 15])
+const squares = Array.from({ length: 16 }, (_, i) => ({
+  id: i,
+  x: (i % 4) * 4,
+  y: Math.floor(i / 4) * 4,
+  delay: Math.random() * 1.5,
+  duration: 1 + Math.random() * 1,
+  outer: outerIndices.has(i),
+}))
 
+export function Spinner(props: { class?: string; classList?: ComponentProps<"div">["classList"] }) {
   return (
     <svg
       viewBox="0 0 15 15"
@@ -28,7 +30,7 @@ export function Spinner(props: { class?: string; classList?: ComponentProps<"div
             height="3"
             rx="1"
             style={{
-              animation: `pulse-opacity ${square.duration}s ease-in-out infinite`,
+              animation: `${square.outer ? "pulse-opacity-dim" : "pulse-opacity"} ${square.duration}s ease-in-out infinite`,
               "animation-delay": `${square.delay}s`,
             }}
           />
diff --git a/packages/ui/src/components/typewriter.tsx b/packages/ui/src/components/typewriter.tsx
index 2f6ecb016..16c85a110 100644
--- a/packages/ui/src/components/typewriter.tsx
+++ b/packages/ui/src/components/typewriter.tsx
@@ -1,4 +1,4 @@
-import { createEffect, Show, type ValidComponent } from "solid-js"
+import { createEffect, onCleanup, Show, type ValidComponent } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
 
@@ -14,6 +14,7 @@ export const Typewriter = <T extends ValidComponent = "p">(props: { text?: strin
     if (!text) return
 
     let i = 0
+    const timeouts: ReturnType<typeof setTimeout>[] = []
     setStore("typing", true)
     setStore("displayed", "")
     setStore("cursor", true)
@@ -29,14 +30,18 @@ export const Typewriter = <T extends ValidComponent = "p">(props: { text?: strin
       if (i < text.length) {
         setStore("displayed", text.slice(0, i + 1))
         i++
-        setTimeout(type, getTypingDelay())
+        timeouts.push(setTimeout(type, getTypingDelay()))
       } else {
         setStore("typing", false)
-        setTimeout(() => setStore("cursor", false), 2000)
+        timeouts.push(setTimeout(() => setStore("cursor", false), 2000))
       }
     }
 
-    setTimeout(type, 200)
+    timeouts.push(setTimeout(type, 200))
+
+    onCleanup(() => {
+      for (const timeout of timeouts) clearTimeout(timeout)
+    })
   })
 
   return (
diff --git a/packages/ui/src/styles/animations.css b/packages/ui/src/styles/animations.css
index 5fcebb93f..0ae3493eb 100644
--- a/packages/ui/src/styles/animations.css
+++ b/packages/ui/src/styles/animations.css
@@ -12,6 +12,16 @@
   }
 }
 
+@keyframes pulse-opacity-dim {
+  0%,
+  100% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+
 @keyframes fadeUp {
   from {
     opacity: 0;