fix: animation flash

abbeyperini · abbeyperini · commit 8c140aaf37d3 · 2026-02-11T14:22:51.000-05:00
diff --git a/app/components/Settings/Toggle.client.vue b/app/components/Settings/Toggle.client.vue
@@ -106,13 +106,13 @@ const id = useId()
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in-out,
+    background-color 200ms ease-in-out,
     border-color 100ms ease-in-out;
 }
 
 .toggle::before {
   transition:
-    background-color 50ms ease-in-out,
+    background-color 200ms ease-in-out,
     translate 200ms ease-in-out;
 }
 
diff --git a/app/components/Settings/Toggle.server.vue b/app/components/Settings/Toggle.server.vue
@@ -61,13 +61,13 @@ const props = withDefaults(
 /* Track transition */
 .toggle {
   transition:
-    background-color 100ms ease-in-out,
+    background-color 200ms ease-in-out,
     border-color 100ms ease-in-out;
 }
 
 .toggle::before {
   transition:
-    background-color 50ms ease-in-out,
+    background-color 200ms ease-in-out,
     translate 200ms ease-in-out;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -106,13 +106,13 @@ const id = useId()`
`106`	`106`	`/* Track transition */`
`107`	`107`	`.toggle {`
`108`	`108`	`transition:`
`109`		`- background-color 100ms ease-in-out,`
	`109`	`+ background-color 200ms ease-in-out,`
`110`	`110`	`border-color 100ms ease-in-out;`
`111`	`111`	`}`
`112`	`112`
`113`	`113`	`.toggle::before {`
`114`	`114`	`transition:`
`115`		`- background-color 50ms ease-in-out,`
	`115`	`+ background-color 200ms ease-in-out,`
`116`	`116`	`translate 200ms ease-in-out;`
`117`	`117`	`}`
`118`	`118`
Original file line number	Diff line number	Diff line change
`@@ -61,13 +61,13 @@ const props = withDefaults(`
`61`	`61`	`/* Track transition */`
`62`	`62`	`.toggle {`
`63`	`63`	`transition:`
`64`		`- background-color 100ms ease-in-out,`
	`64`	`+ background-color 200ms ease-in-out,`
`65`	`65`	`border-color 100ms ease-in-out;`
`66`	`66`	`}`
`67`	`67`
`68`	`68`	`.toggle::before {`
`69`	`69`	`transition:`
`70`		`- background-color 50ms ease-in-out,`
	`70`	`+ background-color 200ms ease-in-out,`
`71`	`71`	`translate 200ms ease-in-out;`
`72`	`72`	`}`
`73`	`73`