feat(ComparisonSlider): add untrack to the effect to limit triggers

src/widgets/ComparisonSlider/ui/ComparisonSlider/components/TypographyControls.svelte

@@ -14,6 +14,7 @@ import {
 import { comparisonStore } from '$widgets/ComparisonSlider/model';
 import AArrowUP from '@lucide/svelte/icons/a-arrow-up';
 import { type Orientation } from 'bits-ui';
+import { untrack } from 'svelte';
 import { Spring } from 'svelte/motion';
 import { fade } from 'svelte/transition';
 
@@ -74,7 +75,10 @@ function handleInputFocus() {
 
 // Movement Logic
 $effect(() => {
-    if (containerWidth === 0 || panelWidth === 0 || staticPosition) return;
+    if (containerWidth === 0 || panelWidth === 0 || staticPosition) {
+        return;
+    }
+
     const sliderX = (sliderPos / 100) * containerWidth;
     const buffer = 40;
     const leftTrigger = margin + panelWidth + buffer;
@@ -88,21 +92,29 @@ $effect(() => {
 });
 
 $effect(() => {
-    const targetX = side === 'right' ? containerWidth - panelWidth - margin * 2 : 0;
+    // Trigger only when side changes
+    const currentSide = side;
+
+    untrack(() => {
         if (containerWidth > 0 && panelWidth > 0) {
+            const targetX = currentSide === 'right'
+                ? containerWidth - panelWidth - margin * 2
+                : 0;
+
             // On side change set the position and the rotation
             xSpring.target = targetX;
-        rotateSpring.target = side === 'right' ? 3.5 : -3.5;
+            rotateSpring.target = currentSide === 'right' ? 3.5 : -3.5;
+
+            if (timeoutId) clearTimeout(timeoutId);
 
             timeoutId = setTimeout(() => {
                 rotateSpring.target = 0;
             }, 600);
         }
+    });
 
     return () => {
-        if (timeoutId) {
-            clearTimeout(timeoutId);
-        }
+        if (timeoutId) clearTimeout(timeoutId);
     };
 });
 </script>