[@mantine/core] SegmentedControl: Remove animation during initializat…

…ion (#5182)
mantinedev · Dec 4, 2023 · 5daccb8 · 5daccb8
1 parent b2c216f
commit 5daccb8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.module.css b/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.module.css
@@ -19,6 +19,10 @@
   overflow: hidden;
   padding: 4px; /* px required for correct indicator calculations */
 
+  &[data-initialization] {
+    --sc-transition-duration: 0ms !important;
+  }
+
   &[data-full-width] {
     --_display: flex;
   }

diff --git a/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.tsx b/packages/@mantine/core/src/components/SegmentedControl/SegmentedControl.tsx
@@ -1,5 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useId, useMergedRef, useResizeObserver, useUncontrolled } from '@mantine/hooks';
+import {
+  useId,
+  useMergedRef,
+  useResizeObserver,
+  useUncontrolled,
+  useTimeout,
+} from '@mantine/hooks';
 import {
   Box,
   BoxProps,
@@ -178,6 +184,7 @@ export const SegmentedControl = factory<SegmentedControlFactory>((_props, ref) =
   const uuid = useId(name);
   const refs = useRef<Record<string, HTMLLabelElement>>({});
   const rootRef = useRef<HTMLDivElement>(null);
+  const [initialized, setInitialized] = useState(false);
   const [observerRef, containerRect] = useResizeObserver();
 
   useEffect(() => {
@@ -213,6 +220,8 @@ export const SegmentedControl = factory<SegmentedControlFactory>((_props, ref) =
     }
   }, [_value, containerRect, dir]);
 
+  useTimeout(() => setInitialized(true), 20, { autoInvoke: true });
+
   const controls = _data.map((item) => (
     <Box
       {...getStyles('control')}
@@ -263,7 +272,7 @@ export const SegmentedControl = factory<SegmentedControlFactory>((_props, ref) =
       variant={variant}
       size={size}
       ref={mergedRef}
-      mod={{ 'full-width': fullWidth, orientation }}
+      mod={{ 'full-width': fullWidth, orientation, initialization: !initialized }}
       {...others}
       role="radiogroup"
     >