From c4acf33439a7152258256d25ce6a12a3fb5a4fee Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Thu, 18 Sep 2025 09:11:08 -0700
Subject: [PATCH] chore: make it so the animation occurs the same for every
 screen size

---
 src/lib/skeleton.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/lib/skeleton.tsx b/src/lib/skeleton.tsx
index fa0f6c3..97d2421 100644
--- a/src/lib/skeleton.tsx
+++ b/src/lib/skeleton.tsx
@@ -11,13 +11,14 @@ const SkeletonContext = createContext({
 const percentage = new Store(0);
 
 interface SkeletonProviderProps {
-  animationDuration?: number; // in milliseconds
+  animationSpeed?: number; // pixels per second (default: 400)
 }
 
-export function SkeletonProvider({ children, animationDuration: propsDuration }: PropsWithChildren<SkeletonProviderProps>) {
+export function SkeletonProvider({ children, animationSpeed: propsSpeed }: PropsWithChildren<SkeletonProviderProps>) {
   const [componentCount, setComponentCount] = useState(0)
+  const [animationDuration, setAnimationDuration] = useState(2000)
 
-  const animationDuration = propsDuration ?? 2000
+  const speed = propsSpeed ?? 400 // pixels per second
 
   const addComponent = () => setComponentCount(count => count + 1)
   const removeComponent = () => setComponentCount(count => Math.max(0, count - 1))
@@ -48,14 +49,20 @@ export function SkeletonProvider({ children, animationDuration: propsDuration }:
 
   useLayoutEffect(() => {
     const setWindowSize = () => {
-      document.body.style.setProperty("--skeleton-window-width", `${window.innerWidth}px`)
+      const windowWidth = window.innerWidth
+      document.body.style.setProperty("--skeleton-window-width", `${windowWidth}px`)
+      // Calculate duration based on window width and speed: distance / speed * 1000 (to convert to ms)
+      // We add highlight size to the distance to account for the full travel
+      const distance = windowWidth + 40 // 40px is the default highlight size
+      const calculatedDuration = (distance / speed) * 1000
+      setAnimationDuration(calculatedDuration)
     }
     setWindowSize()
     window.addEventListener("resize", setWindowSize)
     return () => {
       window.removeEventListener("resize", setWindowSize)
     }
-  }, [])
+  }, [speed])
 
   return (
     <SkeletonContext.Provider value={{ componentCount, addComponent, removeComponent }}>
-- 
2.51.2