chore: Loader全体をmemo化する

kufu · Jan 15, 2025 · 63a4042 · 63a4042
1 parent fd93c58
commit 63a4042
Showing 1 changed file with 41 additions and 35 deletions.
diff --git a/packages/smarthr-ui/src/components/Loader/Loader.tsx b/packages/smarthr-ui/src/components/Loader/Loader.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, FC, ReactNode, useMemo } from 'react'
+import React, { ComponentProps, ReactNode } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
@@ -119,40 +119,46 @@ const loaderStyle = tv({
     },
   },
 })
-export const Loader: FC<Props & ElementProps> = ({
-  size = 'm',
-  alt = '処理中',
-  text,
-  type = 'primary',
-  role = 'status',
-  className,
-  ...props
-}) => {
-  const { wrapper, spinner, line, cog, cogInner, textSlot } = loaderStyle({
-    type,
-    size,
-  })
-  const wrapperStyle = useMemo(() => wrapper({ className }), [wrapper, className])
-  const spinnerStyle = useMemo(() => spinner(), [spinner])
-  const cogStyle = useMemo(() => cog(), [cog])
-  const textStyle = useMemo(() => textSlot(), [textSlot])
 
-  return (
-    <span {...props} className={wrapperStyle} role={role}>
-      <span className={spinnerStyle}>
-        {[...Array(4)].map((_, index) => (
-          <span className={line({ lineNum: (index + 1) as 1 | 2 | 3 | 4 })} key={index}>
-            <span className={cogStyle}>
-              <span className={cogInner({ position: 'left' })} />
-            </span>
-            <span className={cogStyle}>
-              <span className={cogInner({ position: 'right' })} />
+export const Loader = React.memo<Props & ElementProps>(
+  ({
+    size = 'm',
+    alt = '処理中',
+    text,
+    type = 'primary',
+    role = 'status',
+    className,
+    ...props
+  }) => {
+    const { wrapper, spinner, line, cog, cogInner, textSlot } = loaderStyle({
+      type,
+      size,
+    })
+
+    const wrapperStyle = wrapper({ className })
+    const spinnerStyle = spinner()
+    const cogStyle = cog()
+    const cogInnerLeftStyle = cogInner({ position: 'left' })
+    const cogInnerRightStyle = cogInner({ position: 'right' })
+    const textStyle = textSlot()
+
+    return (
+      <span {...props} className={wrapperStyle} role={role}>
+        <span className={spinnerStyle}>
+          {[...Array(4)].map((_, index) => (
+            <span className={line({ lineNum: (index + 1) as 1 | 2 | 3 | 4 })} key={index}>
+              <span className={cogStyle}>
+                <span className={cogInnerLeftStyle} />
+              </span>
+              <span className={cogStyle}>
+                <span className={cogInnerRightStyle} />
+              </span>
             </span>
-          </span>
-        ))}
-        <VisuallyHiddenText>{alt}</VisuallyHiddenText>
+          ))}
+          <VisuallyHiddenText>{alt}</VisuallyHiddenText>
+        </span>
+        {text && <span className={textStyle}>{text}</span>}
       </span>
-      {text && <span className={textStyle}>{text}</span>}
-    </span>
-  )
-}
+    )
+  },
+)