fix: Loaderの表示遅延処理を削除する (#5003)

Author: AtsushiM

packages/smarthr-ui/src/components/Button/Button.tsx

@@ -80,9 +80,7 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
     )
     const { createPortal } = usePortal()
 
-    const loader = (
-      <Loader size="s" deferDisplay={false} className={loaderStyle} role="presentation" />
-    )
+    const loader = <Loader size="s" className={loaderStyle} role="presentation" />
     const actualPrefix = !loading && prefix
     const actualSuffix = loading && !square ? loader : suffix
     const disabledOnLoading = loading || disabled

packages/smarthr-ui/src/components/Loader/Loader.stories.tsx

@@ -9,58 +9,45 @@ export default {
   component: Loader,
 }
 
-export const All: StoryFn = () => {
-  // NOTE: 本来は表示を遅延させているが、VRT 向けにデフォルトでは表示を遅延させない。
-  const [deferDisplay, setDeferDisplay] = React.useState(false)
-  return (
-    <>
-      <label>
-        <input
-          type="checkbox"
-          name="defer_display"
-          checked={deferDisplay}
-          onChange={() => setDeferDisplay(!deferDisplay)}
-        />
-        defer display
-      </label>
-      <Wrapper>
-        <Text>Primary</Text>
-        <List>
-          <dt>Default</dt>
-          <dd>
-            <Loader deferDisplay={deferDisplay} />
-          </dd>
-          <dt>Small</dt>
-          <dd>
-            <Loader deferDisplay={deferDisplay} size="s" />
-          </dd>
-          <dt>With text</dt>
-          <dd>
-            <Loader deferDisplay={deferDisplay} text="loading message" />
-          </dd>
-        </List>
-      </Wrapper>
+export const All: StoryFn = () => (
+  <>
+    <Wrapper>
+      <Text>Primary</Text>
+      <List>
+        <dt>Default</dt>
+        <dd>
+          <Loader />
+        </dd>
+        <dt>Small</dt>
+        <dd>
+          <Loader size="s" />
+        </dd>
+        <dt>With text</dt>
+        <dd>
+          <Loader text="loading message" />
+        </dd>
+      </List>
+    </Wrapper>
 
-      <GrayWrapper>
-        <Text>Light</Text>
-        <List>
-          <dt>Default</dt>
-          <dd>
-            <Loader deferDisplay={deferDisplay} type="light" />
-          </dd>
-          <dt>Small</dt>
-          <dd>
-            <Loader deferDisplay={deferDisplay} type="light" size="s" />
-          </dd>
-          <dt>With text</dt>
-          <dd>
-            <Loader deferDisplay={deferDisplay} type="light" text="loading message" />
-          </dd>
-        </List>
-      </GrayWrapper>
-    </>
-  )
-}
+    <GrayWrapper>
+      <Text>Light</Text>
+      <List>
+        <dt>Default</dt>
+        <dd>
+          <Loader type="light" />
+        </dd>
+        <dt>Small</dt>
+        <dd>
+          <Loader type="light" size="s" />
+        </dd>
+        <dt>With text</dt>
+        <dd>
+          <Loader type="light" text="loading message" />
+        </dd>
+      </List>
+    </GrayWrapper>
+  </>
+)
 All.storyName = 'all'
 All.parameters = { withTheming: true }
 

packages/smarthr-ui/src/components/Loader/Loader.tsx

@@ -12,8 +12,6 @@ type Props = {
   text?: ReactNode
   /** コンポーネントの色調 */
   type?: 'primary' | 'light'
-  /** 表示を遅延させるかどうか */
-  deferDisplay?: boolean
   as?: string | React.ComponentType<any>
 }
 type ElementProps = Omit<ComponentProps<'span'>, keyof Props>
@@ -120,13 +118,6 @@ const loaderStyle = tv({
         ],
       },
     },
-    deferDisplay: {
-      true: {
-        // NOTE: Loaderの表示時間が短い場合のUIのちらつきを抑えるため、opacityの変化でアニメーションの表示を遅延させる
-        wrapper: 'shr-opacity-0 shr-animate-[loader-fade-in_0s_ease_200ms_forwards]',
-      },
-      false: {},
-    },
   },
 })
 export const Loader: FC<Props & ElementProps> = ({
@@ -135,14 +126,12 @@ export const Loader: FC<Props & ElementProps> = ({
   text,
   type = 'primary',
   role = 'status',
-  deferDisplay = true,
   className,
   ...props
 }) => {
   const { wrapper, spinner, line, cog, cogInner, textSlot } = loaderStyle({
     type,
     size,
-    deferDisplay,
   })
   const wrapperStyle = useMemo(() => wrapper({ className }), [wrapper, className])
   const spinnerStyle = useMemo(() => spinner(), [spinner])