fix(frontend): fix switch animation for formatter preview

packages/frontend/src/components/FormatterPreview.module.css

@@ -225,6 +225,12 @@ input.toggleInput {
   border-radius: 50%;
   background: #aaa;
   transition: 0.3s all ease;
+  transform: translateX(0);
+}
+
+/* Force animation during state changes */
+.toggleSwitch.animating::after {
+  transition: 0.3s transform ease;
 }
 
 .toggleInput:checked + .toggleSwitch {
@@ -233,7 +239,7 @@ input.toggleInput {
 }
 
 .toggleInput:checked + .toggleSwitch::after {
-  left: calc(100% - 15px);
+  transform: translateX(18px);
   background-color: #ffffff;
   box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
 }

packages/frontend/src/components/FormatterPreview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import styles from './FormatterPreview.module.css';
 import { ParsedStream } from '@aiostreams/types';
 import {
@@ -81,7 +81,7 @@ const FormatterPreview: React.FC<FormatterPreviewProps> = ({ formatter }) => {
     setFilename(DEFAULT_FILENAME);
   };
 
-  // Toggle switch component
+  // Toggle switch component with animation fix
   const ToggleSwitch = ({
     label,
     isChecked,
@@ -91,6 +91,31 @@ const FormatterPreview: React.FC<FormatterPreviewProps> = ({ formatter }) => {
     isChecked: boolean;
     setChecked: (checked: boolean) => void;
   }) => {
+    const [visualState, setVisualState] = useState(isChecked);
+    const [isAnimating, setIsAnimating] = useState(false);
+
+    // Sync visual state with actual state
+    useEffect(() => {
+      if (!isAnimating) {
+        setVisualState(isChecked);
+      }
+    }, [isChecked, isAnimating]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newState = e.target.checked;
+      setIsAnimating(true);
+      setVisualState(newState);
+
+      // Allow animation to play before updating the actual state
+      setTimeout(() => {
+        setChecked(newState);
+        // Reset animating state after animation completes
+        setTimeout(() => {
+          setIsAnimating(false);
+        }, 50);
+      }, 250); // Slightly shorter than the CSS transition duration
+    };
+
     return (
       <div className={styles.toggleWrapper}>
         <label className={styles.toggleLabel}>
@@ -98,11 +123,13 @@ const FormatterPreview: React.FC<FormatterPreviewProps> = ({ formatter }) => {
           <div className={styles.toggleContainer}>
             <input
               type="checkbox"
-              checked={isChecked}
-              onChange={(e) => setChecked(e.target.checked)}
+              checked={visualState}
+              onChange={handleChange}
               className={styles.toggleInput}
             />
-            <span className={styles.toggleSwitch}></span>
+            <span
+              className={`${styles.toggleSwitch} ${isAnimating ? styles.animating : ''}`}
+            ></span>
           </div>
         </label>
       </div>