From d2dee8e8bc9d193977d77eeb7fbc5c225bb00d09 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Thu, 11 May 2023 00:15:56 +0200
Subject: [PATCH 01/13] new useIsFirstRender

useIsFirstRender rewritten and used in Checkbox and Radio
---
 .../form-elements/checkbox/Checkbox.tsx       | 17 ++++---
 .../form-elements/radio/Radio.stories.mdx     | 33 +++++++++++++
 src/components/form-elements/radio/Radio.tsx  | 46 +++++++++++++------
 src/components/utils/useIsFirstRender.ts      | 23 ++++++----
 4 files changed, 89 insertions(+), 30 deletions(-)

diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index 51a122eaf2..afdd09cbce 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/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,7 +185,8 @@ 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;
@@ -192,19 +194,22 @@ const Checkbox = ({
   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`;
diff --git a/src/components/form-elements/radio/Radio.stories.mdx b/src/components/form-elements/radio/Radio.stories.mdx
index c888815464..88f60f2fa6 100644
--- a/src/components/form-elements/radio/Radio.stories.mdx
+++ b/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 />
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 7a6d054653..8909fb6f8b 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/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 (
diff --git a/src/components/utils/useIsFirstRender.ts b/src/components/utils/useIsFirstRender.ts
index 33fce0b4e2..4169c04d25 100644
--- a/src/components/utils/useIsFirstRender.ts
+++ b/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;
+};

From cdd935c47e39fedffc72b6f9c289e5807ab2857b Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Thu, 11 May 2023 23:00:33 +0200
Subject: [PATCH 02/13] use isomorphic layout effect in useIsFirstRender

---
 package.json                                          |  3 ++-
 .../form-elements/radio/RadioGroup.spec.tsx           | 11 ++++++-----
 src/components/utils/useIsFirstRender.ts              |  3 ++-
 yarn.lock                                             |  5 +++++
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 9dea17a132..f6242b29b1 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,8 @@
     "meow": "^5.0.0",
     "patch-package": "^6.5.1",
     "path": "^0.12.7",
-    "postinstall-postinstall": "^2.1.0"
+    "postinstall-postinstall": "^2.1.0",
+    "use-isomorphic-layout-effect": "^1.1.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.3",
diff --git a/src/components/form-elements/radio/RadioGroup.spec.tsx b/src/components/form-elements/radio/RadioGroup.spec.tsx
index 90e5bc21e1..d4d1ebf602 100644
--- a/src/components/form-elements/radio/RadioGroup.spec.tsx
+++ b/src/components/form-elements/radio/RadioGroup.spec.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import RadioGroup from './RadioGroup';
 import Radio from './Radio';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('<RadioGroup />', () => {
@@ -67,7 +67,7 @@ describe('<RadioGroup />', () => {
     expect(onChange).not.toHaveBeenCalled();
     expect(radioGroup.getByLabelText('Option B')).not.toBeChecked();
   });
-  it('checked radio can be changed on controlled radio group', () => {
+  it('checked radio can be changed on controlled radio group', async () => {
     const {container, getByLabelText, rerender} = renderRadioGroup({
       name: 'option',
       value: 'option-a',
@@ -96,11 +96,10 @@ describe('<RadioGroup />', () => {
         </Radio>
       </RadioGroup>
     );
-    expect(iconsWithAnimation.length).toBe(2);
     expect(getByLabelText('Option A')).not.toBeChecked();
     expect(getByLabelText('Option B')).toBeChecked();
   });
-  it('it does not apply animation unless initial state has changed', () => {
+  it('it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const radioGroup = renderRadioGroup({
       name: 'option',
       value: 'option-a',
@@ -111,7 +110,9 @@ describe('<RadioGroup />', () => {
 
     expect(iconsWithAnimation.length).toBe(0);
     userEvent.click(radioGroup.getByLabelText('Option B'));
-    expect(iconsWithAnimation.length).toBe(2);
+    await waitFor(() => expect(iconsWithAnimation.length).toBe(1));
+    userEvent.click(radioGroup.getByLabelText('Option A'));
+    await waitFor(() => expect(iconsWithAnimation.length).toBe(2));
   });
   it('has an accessible name', () => {
     const onChange = jest.fn();
diff --git a/src/components/utils/useIsFirstRender.ts b/src/components/utils/useIsFirstRender.ts
index 4169c04d25..1c4d4c70ca 100644
--- a/src/components/utils/useIsFirstRender.ts
+++ b/src/components/utils/useIsFirstRender.ts
@@ -1,9 +1,10 @@
 import React from 'react';
+import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
 export const useIsFirstRender = () => {
   const [isFirstRender, setIsFirstRender] = React.useState(true);
 
-  React.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const raf = window.requestAnimationFrame(() => {
       setIsFirstRender(false);
     });
diff --git a/yarn.lock b/yarn.lock
index 8c338f6c05..d85c8290d9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20068,6 +20068,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"

From c7f2457b0dd0024831a82905a348f0e68d32810e Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Thu, 11 May 2023 23:56:17 +0200
Subject: [PATCH 03/13] use ref in useIsFirstRender instead of state

---
 .../form-elements/checkbox/Checkbox.tsx       | 24 +++++++----
 src/components/form-elements/radio/Radio.tsx  | 43 +++++++------------
 src/components/utils/useIsFirstRender.ts      |  4 +-
 3 files changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index afdd09cbce..3c873fde9d 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -176,6 +176,7 @@ const Checkbox = ({
   'aria-labelledby': ariaLabelledBy,
   ...props
 }: CheckboxPropsType) => {
+  const checkboxIconRef = React.useRef<HTMLSpanElement>();
   const {current: checkboxId} = React.useRef(
     id === undefined || id === '' ? generateRandomString() : id
   );
@@ -186,7 +187,6 @@ const Checkbox = ({
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconRef = React.useRef<SVGSVGElement | null>(null);
   const isFirstRender = useIsFirstRender();
-  const [shouldAnimate, setShouldAnimate] = React.useState(false);
 
   React.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
@@ -194,9 +194,14 @@ const Checkbox = ({
   React.useEffect(() => {
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
-      if (!isFirstRender && !shouldAnimate) setShouldAnimate(true);
+
+      if (isFirstRender.current === false && checkboxIconRef.current) {
+        checkboxIconRef.current.classList.add(
+          'sg-checkbox__icon--with-animation'
+        );
+      }
     }
-  }, [checked, isControlled, isChecked, isFirstRender, shouldAnimate]);
+  }, [checked, isControlled, isChecked, isFirstRender]);
   const onInputChange = React.useCallback(
     e => {
       if (!isControlled) {
@@ -205,11 +210,13 @@ const Checkbox = ({
 
       if (onChange) onChange(e);
 
-      if (!shouldAnimate) {
-        setShouldAnimate(true);
+      if (checkboxIconRef.current) {
+        checkboxIconRef.current.classList.add(
+          'sg-checkbox__icon--with-animation'
+        );
       }
     },
-    [onChange, isControlled, shouldAnimate]
+    [onChange, isControlled, checkboxIconRef]
   );
 
   if (__DEV__) {
@@ -235,9 +242,7 @@ const Checkbox = ({
     'sg-checkbox__label--with-padding-bottom': description || errorMessage,
     [`sg-checkbox__label--${String(labelSize)}`]: labelSize,
   });
-  const iconClass = classNames('sg-checkbox__icon', {
-    'sg-checkbox__icon--with-animation': shouldAnimate, // Apply animation only when checkbox is not pristine
-  });
+  const iconClass = classNames('sg-checkbox__icon');
   const errorTextId = `${checkboxId}-errorText`;
   const descriptionId = `${checkboxId}-description`;
   const describedbyIds = React.useMemo(() => {
@@ -292,6 +297,7 @@ const Checkbox = ({
           <div className="sg-checkbox__icon-wrapper">
             <span
               className={iconClass} // This element is purely decorative so
+              ref={checkboxIconRef}
               // we hide it for screen readers
               aria-hidden="true"
             >
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 8909fb6f8b..a2fc8142ed 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -161,6 +161,7 @@ const Radio = ({
   'aria-describedby': ariaDescribedBy,
   ...props
 }: RadioPropsType) => {
+  const circleRef = React.useRef<HTMLSpanElement>();
   const {current: radioId} = useRef(
     id === undefined || id === '' ? generateRandomString() : id
   );
@@ -169,34 +170,21 @@ const Radio = ({
     radioGroupContext && Object.keys(radioGroupContext).length
   );
   const isFirstRender = useIsFirstRender();
-  const [shouldAnimate, setShouldAnimate] = React.useState(false);
   const isControlled = checked !== undefined || isWithinRadioGroup;
-  const [isChecked, setIsChecked] = React.useState<boolean>();
+  let isChecked: boolean | undefined = undefined;
 
-  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;
+  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;
 
-      setIsChecked(newIsChecked);
-
-      if (!isFirstRender && !shouldAnimate && newIsChecked !== isChecked) {
-        setShouldAnimate(true);
-      }
+    if (isFirstRender.current === false && circleRef.current) {
+      circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
-  }, [
-    isChecked,
-    checked,
-    isControlled,
-    value,
-    radioGroupContext.selectedValue,
-    isFirstRender,
-    shouldAnimate,
-  ]);
+  }
 
   const colorName = radioGroupContext.color || color;
   const isDisabled =
@@ -220,7 +208,7 @@ const Radio = ({
     [`sg-radio__label--${String(labelSize)}`]: labelSize,
   });
   const circleClass = classNames('sg-radio__circle', {
-    'sg-radio__circle--with-animation': shouldAnimate,
+    // 'sg-radio__circle--with-animation': shouldAnimate,
   });
   const labelId = ariaLabelledBy || `${radioId}-label`;
   const isInvalid = invalid !== undefined ? invalid : radioGroupContext.invalid;
@@ -235,8 +223,8 @@ const Radio = ({
       onChange(e);
     }
 
-    if (!shouldAnimate) {
-      setShouldAnimate(true);
+    if (circleRef.current) {
+      circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   };
 
@@ -260,6 +248,7 @@ const Radio = ({
             aria-invalid={isInvalid ? true : undefined}
           />
           <span
+            ref={circleRef}
             className={circleClass} // This element is purely decorative so
             // we hide it for screen readers
             aria-hidden="true"
diff --git a/src/components/utils/useIsFirstRender.ts b/src/components/utils/useIsFirstRender.ts
index 1c4d4c70ca..304ed1ee22 100644
--- a/src/components/utils/useIsFirstRender.ts
+++ b/src/components/utils/useIsFirstRender.ts
@@ -2,11 +2,11 @@ import React from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
 export const useIsFirstRender = () => {
-  const [isFirstRender, setIsFirstRender] = React.useState(true);
+  const isFirstRender = React.useRef(true);
 
   useIsomorphicLayoutEffect(() => {
     const raf = window.requestAnimationFrame(() => {
-      setIsFirstRender(false);
+      isFirstRender.current = false;
     });
 
     return () => {

From b62d4d120dd8a9f48169bcea2fff31b317473e3b Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Fri, 12 May 2023 08:19:24 +0200
Subject: [PATCH 04/13] refactor isFirstRender

---
 src/components/form-elements/checkbox/Checkbox.tsx | 6 +++---
 src/components/form-elements/radio/Radio.tsx       | 4 ++--
 src/components/utils/useIsFirstRender.ts           | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index 3c873fde9d..020b5ee38e 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -195,7 +195,7 @@ const Checkbox = ({
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
 
-      if (isFirstRender.current === false && checkboxIconRef.current) {
+      if (!isFirstRender && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
@@ -210,13 +210,13 @@ const Checkbox = ({
 
       if (onChange) onChange(e);
 
-      if (checkboxIconRef.current) {
+      if (!isFirstRender && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     },
-    [onChange, isControlled, checkboxIconRef]
+    [onChange, isControlled, checkboxIconRef, isFirstRender]
   );
 
   if (__DEV__) {
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index a2fc8142ed..8692b4041f 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -181,7 +181,7 @@ const Radio = ({
         : Boolean(radioGroupContext.selectedValue) &&
           radioGroupContext.selectedValue === value;
 
-    if (isFirstRender.current === false && circleRef.current) {
+    if (!isFirstRender && circleRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   }
@@ -223,7 +223,7 @@ const Radio = ({
       onChange(e);
     }
 
-    if (circleRef.current) {
+    if (circleRef.current && !isFirstRender) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   };
diff --git a/src/components/utils/useIsFirstRender.ts b/src/components/utils/useIsFirstRender.ts
index 304ed1ee22..62dfd3e11a 100644
--- a/src/components/utils/useIsFirstRender.ts
+++ b/src/components/utils/useIsFirstRender.ts
@@ -14,5 +14,5 @@ export const useIsFirstRender = () => {
     };
   }, []);
 
-  return isFirstRender;
+  return isFirstRender.current;
 };

From 8d2688b704e3c35dc811529942980ac8c91665e7 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Fri, 12 May 2023 11:34:27 +0200
Subject: [PATCH 05/13] rename useIsFirstRender to useIsAfterFirstPaint

---
 .../form-elements/checkbox/Checkbox.spec.tsx     | 16 +++++++++++-----
 .../form-elements/checkbox/Checkbox.tsx          | 12 ++++++------
 .../form-elements/radio/Radio.spec.tsx           | 12 ++++++++----
 src/components/form-elements/radio/Radio.tsx     |  8 ++++----
 .../form-elements/radio/RadioGroup.spec.tsx      |  7 ++++---
 ...eIsFirstRender.ts => useIsAfterFirstPaint.ts} |  8 ++++----
 6 files changed, 37 insertions(+), 26 deletions(-)
 rename src/components/utils/{useIsFirstRender.ts => useIsAfterFirstPaint.ts} (64%)

diff --git a/src/components/form-elements/checkbox/Checkbox.spec.tsx b/src/components/form-elements/checkbox/Checkbox.spec.tsx
index 9040b6f35c..2445c4844c 100644
--- a/src/components/form-elements/checkbox/Checkbox.spec.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Checkbox from './Checkbox';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
@@ -138,7 +138,7 @@ describe('<Checkbox />', () => {
     expect(checkboxInput.checked).toBe(false);
   });
 
-  it('it does not apply animation unless initial state has changed', () => {
+  it('checkbox it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const checkbox = renderCheckbox({
       defaultChecked: false,
       children: 'my label',
@@ -150,10 +150,16 @@ describe('<Checkbox />', () => {
 
     expect(checkboxInput.checked).toBe(false);
     expect(iconWithAnimation.length).toBe(0);
-    userEvent.click(checkbox.getByLabelText('my label'));
-    expect(checkboxInput).toEqual(document.activeElement);
+    setTimeout(() => {
+      userEvent.click(checkbox.getByLabelText('my label'));
+    });
+    await waitFor(() => {
+      expect(checkboxInput).toEqual(document.activeElement);
+    });
     expect(checkboxInput.checked).toBe(true);
-    expect(iconWithAnimation.length).toBe(1);
+    await waitFor(() => {
+      expect(iconWithAnimation.length).toBe(1);
+    });
   });
 
   describe('a11y', () => {
diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index 020b5ee38e..f031abefb5 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -5,7 +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';
+import {useIsAfterFirstPaint} from '../../utils/useIsAfterFirstPaint';
 
 type CheckboxColorType = 'dark' | 'light';
 type CheckboxLabelSizeType = 'medium' | 'small';
@@ -186,7 +186,7 @@ const Checkbox = ({
   );
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconRef = React.useRef<SVGSVGElement | null>(null);
-  const isFirstRender = useIsFirstRender();
+  const isAfterFirstPaintRef = useIsAfterFirstPaint();
 
   React.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
@@ -195,13 +195,13 @@ const Checkbox = ({
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
 
-      if (!isFirstRender && checkboxIconRef.current) {
+      if (isAfterFirstPaintRef.current && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     }
-  }, [checked, isControlled, isChecked, isFirstRender]);
+  }, [checked, isControlled, isChecked, isAfterFirstPaintRef]);
   const onInputChange = React.useCallback(
     e => {
       if (!isControlled) {
@@ -210,13 +210,13 @@ const Checkbox = ({
 
       if (onChange) onChange(e);
 
-      if (!isFirstRender && checkboxIconRef.current) {
+      if (isAfterFirstPaintRef.current && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     },
-    [onChange, isControlled, checkboxIconRef, isFirstRender]
+    [onChange, isControlled, checkboxIconRef, isAfterFirstPaintRef]
   );
 
   if (__DEV__) {
diff --git a/src/components/form-elements/radio/Radio.spec.tsx b/src/components/form-elements/radio/Radio.spec.tsx
index 1d697052de..08a528185d 100644
--- a/src/components/form-elements/radio/Radio.spec.tsx
+++ b/src/components/form-elements/radio/Radio.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Radio from './Radio';
-import {render} from '@testing-library/react';
+import {render, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {testA11y} from '../../../axe';
 
@@ -104,7 +104,7 @@ describe('<Radio />', () => {
     expect(radioInput.checked).toBe(false);
   });
 
-  it('it does not apply animation unless initial state has changed', () => {
+  it('it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const radio = renderRadio({
       children: 'my label',
     });
@@ -115,8 +115,12 @@ describe('<Radio />', () => {
 
     expect(radioInput.checked).toBe(false);
     expect(iconWithAnimation.length).toBe(0);
-    userEvent.click(radio.getByLabelText('my label'));
-    expect(radioInput).toEqual(document.activeElement);
+    setTimeout(() => {
+      userEvent.click(radio.getByLabelText('my label'));
+    });
+    await waitFor(() => {
+      expect(radioInput).toEqual(document.activeElement);
+    });
     expect(radioInput.checked).toBe(true);
     expect(iconWithAnimation.length).toBe(1);
   });
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 8692b4041f..172efe7f42 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -8,7 +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';
+import {useIsAfterFirstPaint} from '../../utils/useIsAfterFirstPaint';
 
 export type RadioColorType = 'light' | 'dark';
 type RadioLabelSizeType = 'medium' | 'small';
@@ -169,7 +169,7 @@ const Radio = ({
   const isWithinRadioGroup = Boolean(
     radioGroupContext && Object.keys(radioGroupContext).length
   );
-  const isFirstRender = useIsFirstRender();
+  const isAfterFirstPaintRef = useIsAfterFirstPaint();
   const isControlled = checked !== undefined || isWithinRadioGroup;
   let isChecked: boolean | undefined = undefined;
 
@@ -181,7 +181,7 @@ const Radio = ({
         : Boolean(radioGroupContext.selectedValue) &&
           radioGroupContext.selectedValue === value;
 
-    if (!isFirstRender && circleRef.current) {
+    if (isAfterFirstPaintRef.current && circleRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   }
@@ -223,7 +223,7 @@ const Radio = ({
       onChange(e);
     }
 
-    if (circleRef.current && !isFirstRender) {
+    if (circleRef.current && isAfterFirstPaintRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   };
diff --git a/src/components/form-elements/radio/RadioGroup.spec.tsx b/src/components/form-elements/radio/RadioGroup.spec.tsx
index d4d1ebf602..16ab2fa586 100644
--- a/src/components/form-elements/radio/RadioGroup.spec.tsx
+++ b/src/components/form-elements/radio/RadioGroup.spec.tsx
@@ -109,9 +109,10 @@ describe('<RadioGroup />', () => {
     );
 
     expect(iconsWithAnimation.length).toBe(0);
-    userEvent.click(radioGroup.getByLabelText('Option B'));
-    await waitFor(() => expect(iconsWithAnimation.length).toBe(1));
-    userEvent.click(radioGroup.getByLabelText('Option A'));
+
+    requestAnimationFrame(() => {
+      userEvent.click(radioGroup.getByLabelText('Option B'));
+    });
     await waitFor(() => expect(iconsWithAnimation.length).toBe(2));
   });
   it('has an accessible name', () => {
diff --git a/src/components/utils/useIsFirstRender.ts b/src/components/utils/useIsAfterFirstPaint.ts
similarity index 64%
rename from src/components/utils/useIsFirstRender.ts
rename to src/components/utils/useIsAfterFirstPaint.ts
index 62dfd3e11a..5833927ea0 100644
--- a/src/components/utils/useIsFirstRender.ts
+++ b/src/components/utils/useIsAfterFirstPaint.ts
@@ -1,12 +1,12 @@
 import React from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
-export const useIsFirstRender = () => {
-  const isFirstRender = React.useRef(true);
+export const useIsAfterFirstPaint = () => {
+  const afterDOMRender = React.useRef(false);
 
   useIsomorphicLayoutEffect(() => {
     const raf = window.requestAnimationFrame(() => {
-      isFirstRender.current = false;
+      afterDOMRender.current = true;
     });
 
     return () => {
@@ -14,5 +14,5 @@ export const useIsFirstRender = () => {
     };
   }, []);
 
-  return isFirstRender.current;
+  return afterDOMRender;
 };

From 89a57865206aa8058ab25b996eee0d16fc7672f1 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Fri, 12 May 2023 16:47:06 +0200
Subject: [PATCH 06/13] replace useIsAfterFirstPaint with useFirstPaint hook

add story
---
 .../form-elements/checkbox/Checkbox.tsx       | 12 +++---
 src/components/form-elements/radio/Radio.tsx  |  8 ++--
 src/components/utils/UseFirstpaintExample.tsx | 42 +++++++++++++++++++
 .../utils/_use-first-paint-example.scss       | 17 ++++++++
 .../utils/useFirstPaint.stories.mdx           | 42 +++++++++++++++++++
 ...eIsAfterFirstPaint.ts => useFirstPaint.ts} |  6 +--
 6 files changed, 114 insertions(+), 13 deletions(-)
 create mode 100644 src/components/utils/UseFirstpaintExample.tsx
 create mode 100644 src/components/utils/_use-first-paint-example.scss
 create mode 100644 src/components/utils/useFirstPaint.stories.mdx
 rename src/components/utils/{useIsAfterFirstPaint.ts => useFirstPaint.ts} (70%)

diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index f031abefb5..70ec890e7b 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -5,7 +5,7 @@ import {__DEV__, invariant} from '../../utils';
 import Text from '../../text/Text';
 import {CheckIcon, IndeterminateIcon} from './CheckboxIcon';
 import ErrorMessage from '../ErrorMessage';
-import {useIsAfterFirstPaint} from '../../utils/useIsAfterFirstPaint';
+import {useFirstPaint} from '../../utils/useFirstPaint';
 
 type CheckboxColorType = 'dark' | 'light';
 type CheckboxLabelSizeType = 'medium' | 'small';
@@ -186,7 +186,7 @@ const Checkbox = ({
   );
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconRef = React.useRef<SVGSVGElement | null>(null);
-  const isAfterFirstPaintRef = useIsAfterFirstPaint();
+  const isFirstPaintRef = useFirstPaint();
 
   React.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
@@ -195,13 +195,13 @@ const Checkbox = ({
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
 
-      if (isAfterFirstPaintRef.current && checkboxIconRef.current) {
+      if (!isFirstPaintRef.current && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     }
-  }, [checked, isControlled, isChecked, isAfterFirstPaintRef]);
+  }, [checked, isControlled, isChecked, isFirstPaintRef]);
   const onInputChange = React.useCallback(
     e => {
       if (!isControlled) {
@@ -210,13 +210,13 @@ const Checkbox = ({
 
       if (onChange) onChange(e);
 
-      if (isAfterFirstPaintRef.current && checkboxIconRef.current) {
+      if (!isFirstPaintRef.current && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     },
-    [onChange, isControlled, checkboxIconRef, isAfterFirstPaintRef]
+    [onChange, isControlled, checkboxIconRef, isFirstPaintRef]
   );
 
   if (__DEV__) {
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 172efe7f42..955208cc3c 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import Text from '../../text/Text';
 import generateRandomString from '../../../js/generateRandomString';
 import useRadioContext from './useRadioContext';
-import {useIsAfterFirstPaint} from '../../utils/useIsAfterFirstPaint';
+import {useFirstPaint} from '../../utils/useFirstPaint';
 
 export type RadioColorType = 'light' | 'dark';
 type RadioLabelSizeType = 'medium' | 'small';
@@ -169,7 +169,7 @@ const Radio = ({
   const isWithinRadioGroup = Boolean(
     radioGroupContext && Object.keys(radioGroupContext).length
   );
-  const isAfterFirstPaintRef = useIsAfterFirstPaint();
+  const isFirstPaintRef = useFirstPaint();
   const isControlled = checked !== undefined || isWithinRadioGroup;
   let isChecked: boolean | undefined = undefined;
 
@@ -181,7 +181,7 @@ const Radio = ({
         : Boolean(radioGroupContext.selectedValue) &&
           radioGroupContext.selectedValue === value;
 
-    if (isAfterFirstPaintRef.current && circleRef.current) {
+    if (!isFirstPaintRef.current && circleRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   }
@@ -223,7 +223,7 @@ const Radio = ({
       onChange(e);
     }
 
-    if (circleRef.current && isAfterFirstPaintRef.current) {
+    if (circleRef.current && !isFirstPaintRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   };
diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
new file mode 100644
index 0000000000..29a2baea7f
--- /dev/null
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import {useFirstPaint} from './useFirstPaint';
+import './_use-first-paint-example.scss';
+
+export const Example = () => {
+  const expandableRef = React.useRef<HTMLDivElement>();
+  const isFirstPaintRef = useFirstPaint();
+  const [isToggled, setIsToggled] = React.useState(true);
+
+  const handleClick = React.useCallback(() => {
+    setIsToggled(!isToggled);
+  }, [isToggled]);
+
+  return (
+    <div style={{height: 300, width: 600}}>
+      <div
+        onClick={handleClick}
+        ref={expandableRef}
+        style={{
+          position: 'absolute',
+          height: 200,
+          width: 200,
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          background: 'var(--blue-40)',
+          color: 'var(--white)',
+          borderRadius: 'var(--border-radius-xs)',
+          cursor: 'pointer',
+          animationName: isToggled
+            ? 'useFirstPaintExampleToggleOn'
+            : 'useFirstPaintExampleToggleOff',
+          animationDuration: isFirstPaintRef.current ? '0' : '1000ms',
+          animationFillMode: 'both',
+          fontWeight: 'bold',
+        }}
+      >
+        Click me
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/utils/_use-first-paint-example.scss b/src/components/utils/_use-first-paint-example.scss
new file mode 100644
index 0000000000..0026698bd0
--- /dev/null
+++ b/src/components/utils/_use-first-paint-example.scss
@@ -0,0 +1,17 @@
+@keyframes useFirstPaintExampleToggleOn {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(300px);
+  }
+}
+
+@keyframes useFirstPaintExampleToggleOff {
+  0% {
+    transform: translateX(300px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
diff --git a/src/components/utils/useFirstPaint.stories.mdx b/src/components/utils/useFirstPaint.stories.mdx
new file mode 100644
index 0000000000..407489b409
--- /dev/null
+++ b/src/components/utils/useFirstPaint.stories.mdx
@@ -0,0 +1,42 @@
+import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';
+import Accordion from '../accordion/Accordion';
+import AccordionItem from '../accordion/AccordionItem';
+import PageHeader from 'blocks/PageHeader';
+import {Example} from './UseFirstpaintExample.tsx';
+
+<Meta title="Hooks/useFirstPaint" />
+
+<PageHeader type="utility">useFirstPaint</PageHeader>
+
+`useFirstPaint` is a custom hook for detecting when component is before first DOM paint. This is useful for preventing unnecessary animations on initial render.
+
+## Import
+
+```jsx
+import {useFirstPaint} from 'brainly-style-guide';
+```
+
+## Usage
+
+```jsx
+const didFirstPaintRef = useFirstPaint();
+const [isToggled, setIsToggled] = React.useState(true);
+const onClick = () => {
+  setIsToggled(!isToggled);
+};
+
+return (
+  <div
+    click={onClick}
+    style={{
+      // this will make animation instant thus not visible when component is rendered first time
+      animationDuration: didFirstPaintRef.current ? '300ms' : '0',
+    }}
+    className={`${isToggled ? 'with-animation': ''}`}
+  >toggle</>
+);
+```
+
+<Canvas>
+  <Example />
+</Canvas>
diff --git a/src/components/utils/useIsAfterFirstPaint.ts b/src/components/utils/useFirstPaint.ts
similarity index 70%
rename from src/components/utils/useIsAfterFirstPaint.ts
rename to src/components/utils/useFirstPaint.ts
index 5833927ea0..11c6eca87d 100644
--- a/src/components/utils/useIsAfterFirstPaint.ts
+++ b/src/components/utils/useFirstPaint.ts
@@ -1,12 +1,12 @@
 import React from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
-export const useIsAfterFirstPaint = () => {
-  const afterDOMRender = React.useRef(false);
+export const useFirstPaint = () => {
+  const afterDOMRender = React.useRef(true);
 
   useIsomorphicLayoutEffect(() => {
     const raf = window.requestAnimationFrame(() => {
-      afterDOMRender.current = true;
+      afterDOMRender.current = false;
     });
 
     return () => {

From 6fcb185943ca795024c13caf1f49a861f294fa0c Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Fri, 12 May 2023 16:50:39 +0200
Subject: [PATCH 07/13] add description to story

---
 src/components/utils/UseFirstpaintExample.tsx | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
index 29a2baea7f..62859bed96 100644
--- a/src/components/utils/UseFirstpaintExample.tsx
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -12,30 +12,33 @@ export const Example = () => {
   }, [isToggled]);
 
   return (
-    <div style={{height: 300, width: 600}}>
-      <div
-        onClick={handleClick}
-        ref={expandableRef}
-        style={{
-          position: 'absolute',
-          height: 200,
-          width: 200,
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          background: 'var(--blue-40)',
-          color: 'var(--white)',
-          borderRadius: 'var(--border-radius-xs)',
-          cursor: 'pointer',
-          animationName: isToggled
-            ? 'useFirstPaintExampleToggleOn'
-            : 'useFirstPaintExampleToggleOff',
-          animationDuration: isFirstPaintRef.current ? '0' : '1000ms',
-          animationFillMode: 'both',
-          fontWeight: 'bold',
-        }}
-      >
-        Click me
+    <div>
+      <p>Animation is not visible on initial render</p>
+      <div style={{height: 300, width: 600}}>
+        <div
+          onClick={handleClick}
+          ref={expandableRef}
+          style={{
+            position: 'absolute',
+            height: 200,
+            width: 200,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            background: 'var(--blue-40)',
+            color: 'var(--white)',
+            borderRadius: 'var(--border-radius-xs)',
+            cursor: 'pointer',
+            animationName: isToggled
+              ? 'useFirstPaintExampleToggleOn'
+              : 'useFirstPaintExampleToggleOff',
+            animationDuration: isFirstPaintRef.current ? '0' : '1000ms',
+            animationFillMode: 'both',
+            fontWeight: 'bold',
+          }}
+        >
+          Click me
+        </div>
       </div>
     </div>
   );

From c33dd5d892a3b37eed6fce69ecfe2db460b6501a Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Mon, 15 May 2023 07:27:46 +0200
Subject: [PATCH 08/13] clean up

---
 src/components/form-elements/checkbox/Checkbox.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form-elements/checkbox/Checkbox.spec.tsx b/src/components/form-elements/checkbox/Checkbox.spec.tsx
index 2445c4844c..24209f2bc3 100644
--- a/src/components/form-elements/checkbox/Checkbox.spec.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.spec.tsx
@@ -138,7 +138,7 @@ describe('<Checkbox />', () => {
     expect(checkboxInput.checked).toBe(false);
   });
 
-  it('checkbox it does not apply animation unless initial state has changed after first render of DOM', async () => {
+  it('it does not apply animation unless initial state has changed after first render of DOM', async () => {
     const checkbox = renderCheckbox({
       defaultChecked: false,
       children: 'my label',

From 6536c54eed4954fd96b5bebe7897232baf9276fd Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Mon, 15 May 2023 08:16:11 +0200
Subject: [PATCH 09/13] clean up

---
 src/components/form-elements/radio/Radio.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index 955208cc3c..b7d1de43a0 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -207,9 +207,7 @@ const Radio = ({
     'sg-radio__label--with-padding-bottom': description,
     [`sg-radio__label--${String(labelSize)}`]: labelSize,
   });
-  const circleClass = classNames('sg-radio__circle', {
-    // 'sg-radio__circle--with-animation': shouldAnimate,
-  });
+  const circleClass = classNames('sg-radio__circle');
   const labelId = ariaLabelledBy || `${radioId}-label`;
   const isInvalid = invalid !== undefined ? invalid : radioGroupContext.invalid;
 

From 40a608ca5a9665c9c4cc23fb3ba1f3de06098204 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Tue, 16 May 2023 10:45:26 +0200
Subject: [PATCH 10/13] update useFirstPaint story

---
 src/components/utils/useFirstPaint.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utils/useFirstPaint.stories.mdx b/src/components/utils/useFirstPaint.stories.mdx
index 407489b409..f551312ef7 100644
--- a/src/components/utils/useFirstPaint.stories.mdx
+++ b/src/components/utils/useFirstPaint.stories.mdx
@@ -30,7 +30,7 @@ return (
     click={onClick}
     style={{
       // this will make animation instant thus not visible when component is rendered first time
-      animationDuration: didFirstPaintRef.current ? '300ms' : '0',
+      animationDuration: didFirstPaintRef.current ? '0' : '300ms',
     }}
     className={`${isToggled ? 'with-animation': ''}`}
   >toggle</>

From c6ad600965e98fe85d832cfde6907996016a77e8 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Thu, 18 May 2023 13:35:28 +0200
Subject: [PATCH 11/13] use callback in useFirstPaint

---
 src/components/utils/UseFirstpaintExample.tsx | 37 +++++++----------
 src/components/utils/__cache.mdx              | 32 +++++++++++++++
 .../utils/_use-first-paint-example.scss       | 21 ++++++++++
 .../utils/useFirstPaint.stories.mdx           | 40 +++++++++++++------
 src/components/utils/useFirstPaint.ts         | 14 ++++---
 5 files changed, 104 insertions(+), 40 deletions(-)
 create mode 100644 src/components/utils/__cache.mdx

diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
index 62859bed96..5463aa6c71 100644
--- a/src/components/utils/UseFirstpaintExample.tsx
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -1,41 +1,32 @@
 import React from 'react';
 import {useFirstPaint} from './useFirstPaint';
 import './_use-first-paint-example.scss';
+import classNames from 'classnames';
 
 export const Example = () => {
-  const expandableRef = React.useRef<HTMLDivElement>();
-  const isFirstPaintRef = useFirstPaint();
+  const animatedElementRef = React.useRef<HTMLDivElement>();
   const [isToggled, setIsToggled] = React.useState(true);
-
   const handleClick = React.useCallback(() => {
     setIsToggled(!isToggled);
   }, [isToggled]);
 
+  React.useLayoutEffect(() => {
+    animatedElementRef.current.style.animationDuration = '0ms';
+  }, []);
+
+  useFirstPaint(() => {
+    animatedElementRef.current.style.animationDuration = '';
+  });
+
   return (
     <div>
-      <p>Animation is not visible on initial render</p>
       <div style={{height: 300, width: 600}}>
         <div
+          className={classNames('use-first-paint-example-box', {
+            'use-first-paint-example-box--toggled': isToggled,
+          })}
           onClick={handleClick}
-          ref={expandableRef}
-          style={{
-            position: 'absolute',
-            height: 200,
-            width: 200,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            background: 'var(--blue-40)',
-            color: 'var(--white)',
-            borderRadius: 'var(--border-radius-xs)',
-            cursor: 'pointer',
-            animationName: isToggled
-              ? 'useFirstPaintExampleToggleOn'
-              : 'useFirstPaintExampleToggleOff',
-            animationDuration: isFirstPaintRef.current ? '0' : '1000ms',
-            animationFillMode: 'both',
-            fontWeight: 'bold',
-          }}
+          ref={animatedElementRef}
         >
           Click me
         </div>
diff --git a/src/components/utils/__cache.mdx b/src/components/utils/__cache.mdx
new file mode 100644
index 0000000000..2392f58f7c
--- /dev/null
+++ b/src/components/utils/__cache.mdx
@@ -0,0 +1,32 @@
+<PageHeader type="utility">useFirstPaint</PageHeader>
+
+`useFirstPaint` is a custom hook for detecting when component is before first DOM paint. This is useful for preventing unnecessary animations on initial render.
+
+## Import
+
+```jsx
+import {useFirstPaint} from 'brainly-style-guide';
+```
+
+## Usage
+
+```jsx
+const animatedElementRef = React.useRef();
+const [isToggled, setIsToggled] = React.useState(true);
+const onClick = () => {
+  setIsToggled(!isToggled);
+};
+
+useFirstPaint(() => {
+    if (animatedElementRef) {
+      animatedElementRef.current.classList.add('with-animation')
+    }
+  });
+
+return (
+  <div
+    ref={animatedElementRef}
+    click={onClick}
+  >toggle</>
+);
+```
diff --git a/src/components/utils/_use-first-paint-example.scss b/src/components/utils/_use-first-paint-example.scss
index 0026698bd0..4576598c96 100644
--- a/src/components/utils/_use-first-paint-example.scss
+++ b/src/components/utils/_use-first-paint-example.scss
@@ -1,3 +1,24 @@
+.use-first-paint-example-box {
+  animation-duration: 1000ms;
+  position: absolute;
+  height: 200px;
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--blue-40);
+  color: var(--white);
+  border-radius: var(--border-radius-xs);
+  cursor: pointer;
+  animation-fill-mode: both;
+  font-weight: bold;
+  animation-name: useFirstPaintExampleToggleOff;
+
+  &--toggled {
+    animation-name: useFirstPaintExampleToggleOn;
+  }
+}
+
 @keyframes useFirstPaintExampleToggleOn {
   0% {
     transform: translateX(0);
diff --git a/src/components/utils/useFirstPaint.stories.mdx b/src/components/utils/useFirstPaint.stories.mdx
index f551312ef7..17f935f15d 100644
--- a/src/components/utils/useFirstPaint.stories.mdx
+++ b/src/components/utils/useFirstPaint.stories.mdx
@@ -8,7 +8,7 @@ import {Example} from './UseFirstpaintExample.tsx';
 
 <PageHeader type="utility">useFirstPaint</PageHeader>
 
-`useFirstPaint` is a custom hook for detecting when component is before first DOM paint. This is useful for preventing unnecessary animations on initial render.
+`useFirstPaint` is a custom hook for detecting when first DOM paint of component happened. This is useful for e.g. preventing unnecessary animations on initial render.
 
 ## Import
 
@@ -19,24 +19,40 @@ import {useFirstPaint} from 'brainly-style-guide';
 ## Usage
 
 ```jsx
-const didFirstPaintRef = useFirstPaint();
+const animatedElementRef = React.useRef<HTMLDivElement>();
 const [isToggled, setIsToggled] = React.useState(true);
-const onClick = () => {
+const handleClick = React.useCallback(() => {
   setIsToggled(!isToggled);
-};
+}, [isToggled]);
+
+React.useLayoutEffect(() => {
+  animatedElementRef.current.style.animationDuration = '0ms';
+}, []);
+
+useFirstPaint(() => {
+  animatedElementRef.current.style.animationDuration = '';
+});
 
 return (
-  <div
-    click={onClick}
-    style={{
-      // this will make animation instant thus not visible when component is rendered first time
-      animationDuration: didFirstPaintRef.current ? '0' : '300ms',
-    }}
-    className={`${isToggled ? 'with-animation': ''}`}
-  >toggle</>
+  <div>
+    <p>Same animation is not visible on initial render, but after click</p>
+    <div style={{height: 300, width: 600}}>
+      <div
+        className={classNames('use-first-paint-example-box', {
+          'use-first-paint-example-box--toggled': isToggled,
+        })}
+        onClick={handleClick}
+        ref={animatedElementRef}
+      >
+        Click me
+      </div>
+    </div>
+  </div>
 );
 ```
 
+`useFirstPaint` is used here to "hide" transition on first render by making its duration 0ms, but when first paint is done we can reset the duration to see full animation.
+
 <Canvas>
   <Example />
 </Canvas>
diff --git a/src/components/utils/useFirstPaint.ts b/src/components/utils/useFirstPaint.ts
index 11c6eca87d..28255ed59e 100644
--- a/src/components/utils/useFirstPaint.ts
+++ b/src/components/utils/useFirstPaint.ts
@@ -1,18 +1,22 @@
 import React from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
-export const useFirstPaint = () => {
-  const afterDOMRender = React.useRef(true);
+export const useFirstPaint = (after: () => void) => {
+  const nextFrame = React.useRef(false);
+
+  useIsomorphicLayoutEffect(() => {
+    if (nextFrame.current) {
+      after();
+    }
+  }, [nextFrame.current]);
 
   useIsomorphicLayoutEffect(() => {
     const raf = window.requestAnimationFrame(() => {
-      afterDOMRender.current = false;
+      nextFrame.current = true;
     });
 
     return () => {
       window.cancelAnimationFrame(raf);
     };
   }, []);
-
-  return afterDOMRender;
 };

From 6c3eebe7898292e54f3e07099cc8a093cbb76e83 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Thu, 18 May 2023 13:55:42 +0200
Subject: [PATCH 12/13] fix example code

---
 src/components/utils/useFirstPaint.stories.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/utils/useFirstPaint.stories.mdx b/src/components/utils/useFirstPaint.stories.mdx
index 17f935f15d..bb8f912ca6 100644
--- a/src/components/utils/useFirstPaint.stories.mdx
+++ b/src/components/utils/useFirstPaint.stories.mdx
@@ -19,7 +19,7 @@ import {useFirstPaint} from 'brainly-style-guide';
 ## Usage
 
 ```jsx
-const animatedElementRef = React.useRef<HTMLDivElement>();
+const animatedElementRef = React.useRef();
 const [isToggled, setIsToggled] = React.useState(true);
 const handleClick = React.useCallback(() => {
   setIsToggled(!isToggled);

From c7664f9ce102055e3fb2aa814fdba50489c00c73 Mon Sep 17 00:00:00 2001
From: Bartosz Adamczyk <bartoszadamczykk@gmail.com>
Date: Thu, 18 May 2023 18:36:52 +0200
Subject: [PATCH 13/13] update Checkbox and Radio after last changes

---
 .../form-elements/checkbox/Checkbox.tsx           | 15 +++++++++------
 src/components/form-elements/radio/Radio.tsx      | 10 +++++++---
 src/components/utils/UseFirstpaintExample.tsx     |  7 ++++++-
 src/components/utils/useFirstPaint.stories.mdx    |  8 ++++++--
 src/components/utils/useFirstPaint.ts             | 15 +++------------
 5 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/components/form-elements/checkbox/Checkbox.tsx b/src/components/form-elements/checkbox/Checkbox.tsx
index 70ec890e7b..e328030e63 100644
--- a/src/components/form-elements/checkbox/Checkbox.tsx
+++ b/src/components/form-elements/checkbox/Checkbox.tsx
@@ -186,7 +186,11 @@ const Checkbox = ({
   );
   const inputRef = React.useRef<HTMLInputElement>(null);
   const iconRef = React.useRef<SVGSVGElement | null>(null);
-  const isFirstPaintRef = useFirstPaint();
+  const shouldAnimate = React.useRef(false);
+
+  useFirstPaint(() => {
+    shouldAnimate.current = true;
+  });
 
   React.useEffect(() => {
     if (inputRef.current) inputRef.current.indeterminate = indeterminate;
@@ -194,14 +198,13 @@ const Checkbox = ({
   React.useEffect(() => {
     if (isControlled && checked !== isChecked) {
       setIsChecked(checked);
-
-      if (!isFirstPaintRef.current && checkboxIconRef.current) {
+      if (shouldAnimate.current && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     }
-  }, [checked, isControlled, isChecked, isFirstPaintRef]);
+  }, [checked, isControlled, isChecked]);
   const onInputChange = React.useCallback(
     e => {
       if (!isControlled) {
@@ -210,13 +213,13 @@ const Checkbox = ({
 
       if (onChange) onChange(e);
 
-      if (!isFirstPaintRef.current && checkboxIconRef.current) {
+      if (shouldAnimate.current && checkboxIconRef.current) {
         checkboxIconRef.current.classList.add(
           'sg-checkbox__icon--with-animation'
         );
       }
     },
-    [onChange, isControlled, checkboxIconRef, isFirstPaintRef]
+    [onChange, isControlled, checkboxIconRef]
   );
 
   if (__DEV__) {
diff --git a/src/components/form-elements/radio/Radio.tsx b/src/components/form-elements/radio/Radio.tsx
index b7d1de43a0..e6f32506f2 100644
--- a/src/components/form-elements/radio/Radio.tsx
+++ b/src/components/form-elements/radio/Radio.tsx
@@ -169,10 +169,14 @@ const Radio = ({
   const isWithinRadioGroup = Boolean(
     radioGroupContext && Object.keys(radioGroupContext).length
   );
-  const isFirstPaintRef = useFirstPaint();
+  const shouldAnimateRef = React.useRef(false);
   const isControlled = checked !== undefined || isWithinRadioGroup;
   let isChecked: boolean | undefined = undefined;
 
+  useFirstPaint(() => {
+    shouldAnimateRef.current = true;
+  });
+
   if (isControlled) {
     // Radio can either be directly set as checked, or be controlled by a RadioGroup
     isChecked =
@@ -181,7 +185,7 @@ const Radio = ({
         : Boolean(radioGroupContext.selectedValue) &&
           radioGroupContext.selectedValue === value;
 
-    if (!isFirstPaintRef.current && circleRef.current) {
+    if (shouldAnimateRef.current && circleRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   }
@@ -221,7 +225,7 @@ const Radio = ({
       onChange(e);
     }
 
-    if (circleRef.current && !isFirstPaintRef.current) {
+    if (circleRef.current && shouldAnimateRef.current) {
       circleRef.current.classList.add('sg-radio__circle--with-animation');
     }
   };
diff --git a/src/components/utils/UseFirstpaintExample.tsx b/src/components/utils/UseFirstpaintExample.tsx
index 5463aa6c71..1a29f06075 100644
--- a/src/components/utils/UseFirstpaintExample.tsx
+++ b/src/components/utils/UseFirstpaintExample.tsx
@@ -5,9 +5,14 @@ import classNames from 'classnames';
 
 export const Example = () => {
   const animatedElementRef = React.useRef<HTMLDivElement>();
+  const shouldAnimateRef = React.useRef(false);
   const [isToggled, setIsToggled] = React.useState(true);
   const handleClick = React.useCallback(() => {
     setIsToggled(!isToggled);
+
+    if (shouldAnimateRef.current) {
+      animatedElementRef.current.style.animationDuration = '';
+    }
   }, [isToggled]);
 
   React.useLayoutEffect(() => {
@@ -15,7 +20,7 @@ export const Example = () => {
   }, []);
 
   useFirstPaint(() => {
-    animatedElementRef.current.style.animationDuration = '';
+    shouldAnimateRef.current = true;
   });
 
   return (
diff --git a/src/components/utils/useFirstPaint.stories.mdx b/src/components/utils/useFirstPaint.stories.mdx
index bb8f912ca6..fa4e873d32 100644
--- a/src/components/utils/useFirstPaint.stories.mdx
+++ b/src/components/utils/useFirstPaint.stories.mdx
@@ -20,9 +20,14 @@ import {useFirstPaint} from 'brainly-style-guide';
 
 ```jsx
 const animatedElementRef = React.useRef();
+const shouldAnimateRef = React.useRef(false);
 const [isToggled, setIsToggled] = React.useState(true);
 const handleClick = React.useCallback(() => {
   setIsToggled(!isToggled);
+
+  if (shouldAnimateRef.current) {
+    animatedElementRef.current.style.animationDuration = '';
+  }
 }, [isToggled]);
 
 React.useLayoutEffect(() => {
@@ -30,12 +35,11 @@ React.useLayoutEffect(() => {
 }, []);
 
 useFirstPaint(() => {
-  animatedElementRef.current.style.animationDuration = '';
+  shouldAnimateRef.current = true;
 });
 
 return (
   <div>
-    <p>Same animation is not visible on initial render, but after click</p>
     <div style={{height: 300, width: 600}}>
       <div
         className={classNames('use-first-paint-example-box', {
diff --git a/src/components/utils/useFirstPaint.ts b/src/components/utils/useFirstPaint.ts
index 28255ed59e..aa11b7f9b9 100644
--- a/src/components/utils/useFirstPaint.ts
+++ b/src/components/utils/useFirstPaint.ts
@@ -1,22 +1,13 @@
-import React from 'react';
 import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';
 
-export const useFirstPaint = (after: () => void) => {
-  const nextFrame = React.useRef(false);
-
-  useIsomorphicLayoutEffect(() => {
-    if (nextFrame.current) {
-      after();
-    }
-  }, [nextFrame.current]);
-
+export const useFirstPaint = (cb: () => void) => {
   useIsomorphicLayoutEffect(() => {
     const raf = window.requestAnimationFrame(() => {
-      nextFrame.current = true;
+      cb();
     });
 
     return () => {
       window.cancelAnimationFrame(raf);
     };
-  }, []);
+  }, [cb]);
 };