From 9f2ed2f9d47cb96885ac29d09de51e3bb7b9c62f Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 10 Dec 2025 18:33:29 +0200
Subject: [PATCH] feat(widgets/toggle): disable transitions on first render

---
 apps/client/src/widgets/react/FormToggle.css | 10 +++++++++-
 apps/client/src/widgets/react/FormToggle.tsx | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css
index 941839143..bfe5bdc61 100644
--- a/apps/client/src/widgets/react/FormToggle.css
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -24,6 +24,14 @@
     border-radius: 24px;
     background-color: var(--switch-off-track-background);
     transition: background 200ms ease-in;
+
+    &.disable-transitions {
+        transition: none !important;
+
+        &:after {
+            transition: none !important;
+        }
+    }
 }
 
 .switch-widget .switch-button.on {
@@ -103,4 +111,4 @@ body[dir=rtl] .switch-widget .switch-button.on:after {
 
 .switch-widget .switch-help-button:hover {
     color: var(--main-text-color);
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/widgets/react/FormToggle.tsx b/apps/client/src/widgets/react/FormToggle.tsx
index ba7499f36..39be5cd70 100644
--- a/apps/client/src/widgets/react/FormToggle.tsx
+++ b/apps/client/src/widgets/react/FormToggle.tsx
@@ -1,5 +1,7 @@
+import clsx from "clsx";
 import "./FormToggle.css";
 import HelpButton from "./HelpButton";
+import { useEffect, useState } from "preact/hooks";
 
 interface FormToggleProps {
     currentValue: boolean | null;
@@ -13,13 +15,22 @@ interface FormToggleProps {
 }
 
 export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled }: FormToggleProps) {
+    const [ disableTransition, setDisableTransition ] = useState(true);
+
+    useEffect(() => {
+        const timeout = setTimeout(() => {
+            setDisableTransition(false);
+        }, 100);
+        return () => clearTimeout(timeout);
+    }, []);
+
     return (
         <div className="switch-widget">
             <span className="switch-name">{ currentValue ? switchOffName : switchOnName }</span>
 
             <label>
                 <div
-                    className={`switch-button ${currentValue ? "on" : ""} ${disabled ? "disabled" : ""}`}
+                    className={clsx("switch-button", { "on": currentValue, disabled, "disable-transitions": disableTransition })}
                     title={currentValue ? switchOffTooltip : switchOnTooltip }
                 >
                     <input