From 5267611472d758139b4d28a63b7635779333fd16 Mon Sep 17 00:00:00 2001
From: Gauthier <mail@gauthierth.fr>
Date: Mon, 4 May 2026 22:45:36 +0200
Subject: [PATCH] fix(slider): add async to spring animation (#2978)

---
 src/components/Slider/index.tsx | 20 ++++++++------------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/components/Slider/index.tsx b/src/components/Slider/index.tsx
index 74c6619ec..476eeb627 100644
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -33,6 +33,7 @@ const Slider = ({
   const [scrollPos, setScrollPos] = useState({ isStart: true, isEnd: false });
 
   const handleScroll = useCallback(() => {
+    const margin = 5;
     const scrollWidth = containerRef.current?.scrollWidth ?? 0;
     const clientWidth =
       containerRef.current?.getBoundingClientRect().width ?? 0;
@@ -44,10 +45,10 @@ const Slider = ({
       setScrollPos({ isStart: true, isEnd: true });
     } else if (
       scrollPosition >=
-      (containerRef.current?.scrollWidth ?? 0) - clientWidth
+      (containerRef.current?.scrollWidth ?? 0) - clientWidth - margin
     ) {
       setScrollPos({ isStart: false, isEnd: true });
-    } else if (scrollPosition > 0) {
+    } else if (scrollPosition > margin) {
       setScrollPos({ isStart: false, isEnd: false });
     } else {
       setScrollPos({ isStart: true, isEnd: false });
@@ -83,14 +84,9 @@ const Slider = ({
   const [, setX] = useSpring(() => ({
     from: { x: 0 },
     to: { x: 0 },
-    onChange: (results) => {
-      if (containerRef.current) {
-        containerRef.current.scrollLeft = results.value.x;
-      }
-    },
   }));
 
-  const slide = (direction: Direction) => {
+  const slide = async (direction: Direction) => {
     const clientWidth =
       containerRef.current?.getBoundingClientRect().width ?? 0;
     const cardWidth =
@@ -105,7 +101,7 @@ const Slider = ({
         scrollPosition - scrollOffset - visibleItems * cardWidth,
         0
       );
-      setX.start({
+      await setX.start({
         from: { x: scrollPosition },
         to: { x: newX },
         onChange: (results) => {
@@ -115,7 +111,7 @@ const Slider = ({
         },
         reset: true,
         config: { friction: 60, tension: 500, velocity: 20 },
-      });
+      })[0];
 
       if (newX === 0) {
         setScrollPos({ isStart: true, isEnd: false });
@@ -127,7 +123,7 @@ const Slider = ({
         scrollPosition - scrollOffset + visibleItems * cardWidth,
         containerRef.current?.scrollWidth ?? 0 - clientWidth
       );
-      setX.start({
+      await setX.start({
         from: { x: scrollPosition },
         to: { x: newX },
         onChange: (results) => {
@@ -137,7 +133,7 @@ const Slider = ({
         },
         reset: true,
         config: { friction: 60, tension: 500, velocity: 20 },
-      });
+      })[0];
 
       if (newX >= (containerRef.current?.scrollWidth ?? 0) - clientWidth) {
         setScrollPos({ isStart: false, isEnd: true });