🎨 Improve Carousel performance with 0 debounce

Frontendland · Sep 20, 2024 · a3cc89e · a3cc89e
1 parent 60eeddd
commit a3cc89e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 11 deletions.
diff --git a/src/components/Carousel/Carousel.astro b/src/components/Carousel/Carousel.astro
@@ -135,8 +135,6 @@ const style = visibleItems > 1
             const activeElement = carouselElement.children[page - 1] as HTMLLIElement
 
             activeElement.dataset.active = 'true'
-        } else {
-            target.removeAttribute('data-paginated')
         }
     }
 
@@ -180,12 +178,16 @@ const style = visibleItems > 1
         }
 
         if (event.trusted) {
+            const carouselContaienr = target.closest('section').querySelector('[data-id="w-carousel"]')
+
             liElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
             liElement.dataset.active = 'true'
 
-            target.closest('section')
-                .querySelector('[data-id="w-carousel"]')
-                .dataset.paginated = 'true'
+            carouselContaienr.dataset.paginated = 'true'
+
+            setTimeout(() => {
+                carouselContaienr.removeAttribute('data-paginated')
+            }, 300)
         }
     })
 </script>
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
@@ -87,9 +87,7 @@
     }
 
     const scroll = debounceScroll((event: Event) => {
-        if (paginated) {
-            paginated = false
-        } else {
+        if (!paginated) {
             const target = event.target as HTMLDivElement
             const scrollLeft = target.scrollLeft
             const itemWidth = target.children[0].clientWidth
@@ -110,6 +108,9 @@
         paginated = true
 
         updateValues()
+        setTimeout(() => {
+            paginated = false
+        }, 300)
     }
 
     onMount(() => {

diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx
@@ -92,9 +92,7 @@ const Carousel = ({
     }
 
     const scroll = debounceScroll((event: Event) => {
-        if (paginated.current) {
-            paginated.current = false
-        } else {
+        if (!paginated.current) {
             const target = event.target as HTMLDivElement
             const scrollLeft = target.scrollLeft
             const itemWidth = target.children[0].clientWidth
@@ -115,6 +113,9 @@ const Carousel = ({
         paginated.current = true
 
         updateValues(event.page)
+        setTimeout(() => {
+            paginated.current = false
+        }, 300)
     }
 
     useEffect(() => {