use useFirstPaint to control animation in Checkbox and Radio

src/components/form-elements/checkbox/Checkbox.tsx

@@ -5,6 +5,7 @@ import {__DEV__, invariant} from '../../utils';
 import Text from '../../text/Text';
 import {CheckIcon, IndeterminateIcon} from './CheckboxIcon';
 import ErrorMessage from '../ErrorMessage';
+import {useIsFirstRender} from '../../utils/useIsFirstRender';
 
 type CheckboxColorType = 'dark' | 'light';
 type CheckboxLabelSizeType = 'medium' | 'small';
@@ -184,27 +185,31 @@ const Checkbox = ({
   );
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconRef = React.useRef<SVGSVGElement | null>(null);
-  const [isPristine, setIsPristine] = React.useState(true);
+  const isFirstRender = useIsFirstRender();
+  const [shouldAnimate, setShouldAnimate] = React.useState(false);
 
   React.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
   }, [inputRef, indeterminate]);
   React.useEffect(() => {
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
-      if (isPristine) setIsPristine(false);
+      if (!isFirstRender && !shouldAnimate) setShouldAnimate(true);
     }
-  }, [checked, isControlled, isChecked, isPristine]);
+  }, [checked, isControlled, isChecked, isFirstRender, shouldAnimate]);
   const onInputChange = React.useCallback(
     e => {
       if (!isControlled) {
         setIsChecked(val => !val);
-        if (isPristine) setIsPristine(false);
       }
 
       if (onChange) onChange(e);
+
+      if (!shouldAnimate) {
+        setShouldAnimate(true);
+      }
     },
-    [onChange, isControlled, isPristine]
+    [onChange, isControlled, shouldAnimate]
   );
 
   if (__DEV__) {
@@ -231,7 +236,7 @@ const Checkbox = ({
     [`sg-checkbox__label--${String(labelSize)}`]: labelSize,
   });
   const iconClass = classNames('sg-checkbox__icon', {
-    'sg-checkbox__icon--with-animation': !isPristine, // Apply animation only when checkbox is not pristine
+    'sg-checkbox__icon--with-animation': shouldAnimate, // Apply animation only when checkbox is not pristine
   });
   const errorTextId = `${checkboxId}-errorText`;
   const descriptionId = `${checkboxId}-description`;

src/components/form-elements/radio/Radio.stories.mdx

@@ -7,6 +7,7 @@ import Flex from '../../flex/Flex';
 import Box from '../../box/Box';
 import Headline from '../../text/Headline';
 import Text from '../../text/Text';
+import Button from '../../buttons/Button';
 
 import Radio from './Radio';
 import RadioGroup from './RadioGroup';
@@ -381,6 +382,38 @@ In the following example, className `sg-radio--custom-theme` was applied to all
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story
+    name="toggle without radio group"
+    height="120px"
+    args={{name: 'optionA', value: 'option-a'}}
+  >
+    {args => {
+      const [value, setValue] = React.useState('option-a');
+      return (
+        <div>
+          <div>
+            <Button
+              onClick={() =>
+                setValue(value === 'option-a' ? 'option-b' : 'option-a')
+              }
+              size="s"
+            >
+              click to toggle active radio
+            </Button>
+          </div>
+          <Radio value="option-a" checked={value === 'option-a'}>
+            Option A
+          </Radio>
+          <Radio value="option-b" checked={value === 'option-b'}>
+            Option B
+          </Radio>
+        </div>
+      );
+    }}
+  </Story>
+</Canvas>
+
 ## Accessibility
 
 <RadioA11y />

src/components/form-elements/radio/Radio.tsx

@@ -8,6 +8,7 @@ import classNames from 'classnames';
 import Text from '../../text/Text';
 import generateRandomString from '../../../js/generateRandomString';
 import useRadioContext from './useRadioContext';
+import {useIsFirstRender} from '../../utils/useIsFirstRender';
 
 export type RadioColorType = 'light' | 'dark';
 type RadioLabelSizeType = 'medium' | 'small';
@@ -167,20 +168,35 @@ const Radio = ({
   const isWithinRadioGroup = Boolean(
     radioGroupContext && Object.keys(radioGroupContext).length
   );
-  const [isPristine, setIsPristine] = React.useState(true);
-  const shouldAnimate =
-    (isWithinRadioGroup && !radioGroupContext.isPristine) || !isPristine;
+  const isFirstRender = useIsFirstRender();
+  const [shouldAnimate, setShouldAnimate] = React.useState(false);
   const isControlled = checked !== undefined || isWithinRadioGroup;
-  let isChecked: boolean | undefined = undefined;
+  const [isChecked, setIsChecked] = React.useState<boolean>();
 
-  if (isControlled) {
-    // Radio can either be directly set as checked, or be controlled by a RadioGroup
-    isChecked =
-      checked !== undefined
-        ? checked
-        : Boolean(radioGroupContext.selectedValue) &&
-          radioGroupContext.selectedValue === value;
-  }
+  React.useEffect(() => {
+    if (isControlled) {
+      // Radio can either be directly set as checked, or be controlled by a RadioGroup
+      const newIsChecked =
+        checked !== undefined
+          ? checked
+          : Boolean(radioGroupContext.selectedValue) &&
+            radioGroupContext.selectedValue === value;
+
+      setIsChecked(newIsChecked);
+
+      if (!isFirstRender && !shouldAnimate && newIsChecked !== isChecked) {
+        setShouldAnimate(true);
+      }
+    }
+  }, [
+    isChecked,
+    checked,
+    isControlled,
+    value,
+    radioGroupContext.selectedValue,
+    isFirstRender,
+    shouldAnimate,
+  ]);
 
   const colorName = radioGroupContext.color || color;
   const isDisabled =
@@ -213,13 +229,15 @@ const Radio = ({
     if (isWithinRadioGroup) {
       radioGroupContext.setLastFocusedValue(value);
       radioGroupContext.setSelectedValue(e, value);
-    } else {
-      setIsPristine(false);
     }
 
     if (onChange) {
       onChange(e);
     }
+
+    if (!shouldAnimate) {
+      setShouldAnimate(true);
+    }
   };
 
   return (

src/components/utils/useIsFirstRender.ts

@@ -1,14 +1,17 @@
-import {useRef} from 'react';
+import React from 'react';
 
-const useIsFirstRender = () => {
-  const isFirstRender = useRef(true);
+export const useIsFirstRender = () => {
+  const [isFirstRender, setIsFirstRender] = React.useState(true);
 
-  if (isFirstRender.current === true) {
-    isFirstRender.current = false;
-    return true;
-  }
+  React.useLayoutEffect(() => {
+    const raf = window.requestAnimationFrame(() => {
+      setIsFirstRender(false);
+    });
 
-  return isFirstRender.current;
-};
+    return () => {
+      window.cancelAnimationFrame(raf);
+    };
+  }, []);
 
-export default useIsFirstRender;
+  return isFirstRender;
+};