From 8203f69adaddceac81e66ae529b2ef4fba5f1bb1 Mon Sep 17 00:00:00 2001
From: Corbin Crutchley <git@crutchcorn.dev>
Date: Thu, 18 Sep 2025 08:45:07 -0700
Subject: [PATCH] chore: initial loop

---
 src/lib/skeleton.tsx | 21 ++++++++++++++-------
 src/skeleton.css     |  9 +++++++--
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/lib/skeleton.tsx b/src/lib/skeleton.tsx
index 300855a..9c0402a 100644
--- a/src/lib/skeleton.tsx
+++ b/src/lib/skeleton.tsx
@@ -35,14 +35,9 @@ export function SkeletonProvider({ children, animationDuration: propsDuration }:
     const step = (timestamp: number) => {
       if (!start) start = timestamp
       const elapsed = timestamp - start
-      const progress = Math.min(elapsed / animationDuration, 1)
+      const progress = (elapsed % animationDuration) / animationDuration
       percentage.setState(() => progress * 100)
-      if (elapsed < animationDuration) {
-        frameId = requestAnimationFrame(step)
-      } else {
-        start = null
-        frameId = requestAnimationFrame(step)
-      }
+      frameId = requestAnimationFrame(step)
     }
 
     frameId = requestAnimationFrame(step)
@@ -51,6 +46,17 @@ export function SkeletonProvider({ children, animationDuration: propsDuration }:
     }
   }, [componentCount, animationDuration])
 
+  useLayoutEffect(() => {
+    const setWindowSize = () => {
+      document.body.style.setProperty("--skeleton-window-width", `${window.innerWidth}px`)
+    }
+    setWindowSize()
+    window.addEventListener("resize", setWindowSize)
+    return () => {
+      window.removeEventListener("resize", setWindowSize)
+    }
+  }, [])
+
   return (
     <SkeletonContext.Provider value={{ componentCount, addComponent, removeComponent }}>
       {children}
@@ -84,6 +90,7 @@ export const useSkeleton = () => {
     const observer = new ResizeObserver((entries) => {
       const rect = ref.getBoundingClientRect()
       ref.style.setProperty("--skeleton-left", `${rect.left}px`)
+      ref.style.setProperty("--skeleton-top", `${rect.top}px`)
       for (let entry of entries) {
         const width = entry.contentRect.width
         ref.style.setProperty("--skeleton-width", `${width}px`)
diff --git a/src/skeleton.css b/src/skeleton.css
index 1700028..b5921a4 100644
--- a/src/skeleton.css
+++ b/src/skeleton.css
@@ -1,8 +1,13 @@
 .react-loading-skeleton {
   --base-color: #ebebeb;
   --highlight-color: #f5f5f5;
-  --animation-direction: normal;
+  --highlight-size: 40px;
   --pseudo-element-display: block; /* Enable animation */
+  --skeleton-window-width: 0px; /* Set via JS, the width of the window */
+  --skeleton-percentage: 0%; /* Set via JS, the progress of the animation */
+  --skeleton-left: 0px; /* Set via JS, the global left position of the element */
+  --skeleton-top: 0px; /* Set via JS, the global top position of the element */
+  --skeleton-width: 0px; /* Set via JS, the width of the element */
 
   background-color: var(--base-color);
 
@@ -16,7 +21,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  right: 0;
+  width: var(--highlight-size);
   height: 100%;
   background-repeat: no-repeat;
   background-image: var(
-- 
2.51.2