Delay

Delay를 사용하는 이유

데이터가 빠르게 로드되면(200ms 이내), 스피너를 보여주는 것은 로딩 상태의 깜빡임(flash-of-loading-state) 을 만듭니다 — 반응적으로 느껴지기보다 깨진 것처럼 보이는 짧은 깜빡임입니다. <Delay/>는 로딩 UI가 실제로 필요할 때까지 보류하여 이 문제를 해결합니다.

권장 ms 값:

100–300ms 대부분의 UI — 빠른 네트워크에서는 스피너를 숨기고, 느린 네트워크에서만 표시
500ms+ 지연된 피드백이 허용되는 비핵심 영역

<Delay/>는 <Suspense/>와 함께 사용하도록 설계되었습니다:


<Suspense
  fallback={
    <Delay ms={200}>
      {({ isDelayed }) => (
        <Spinner
          style={{ opacity: isDelayed ? 1 : 0, transition: 'opacity 200ms' }}
        />
      )}
    </Delay>
  }
>
  <Content />
</Suspense>

render prop 패턴으로 isDelayed를 사용하면 갑작스러운 등장 대신 부드러운 fade-in 전환이 가능합니다.

사용법

이 컴포넌트는 두 가지 방식으로 사용할 수 있습니다.

children에 delay를 적용하여 노출 시점을 지연시키거나,
children이 render prop일 경우 delay된 시점에 플래그를 전달합니다.

props.ms

1. children이 노출되는 시점을 지연

이 컴포넌트는 children이 노출되는 시점을 ms만큼 지연시킵니다. 아래와 같은 코드에서는 200ms만큼 children 노출이 지연됩니다.


import { Delay } from '@suspensive/react'
 
export const Example = () => {
  return (
    <Delay ms={200}>
      <Delayed />
    </Delay>
  )
}

import { Delay } from '@suspensive/react'

export const Example = () => (
  <Delay ms={1000}>
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      1s delayed Text
    </div>
  </Delay>
)

Open Sandbox

2. children에 지연된 플래그를 전달하기

children이 render prop이라면 노출을 제어하지 않고 플래그를 전달합니다. 아래와 같은 코드에서는 200ms 뒤에 isDelayed가 true로 전달됩니다.


import { Delay } from '@suspensive/react'
 
export const Example = () => {
  return (
    <Delay ms={200}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,
            transition: 'opacity 1500ms',
          }}
        ></div>
      )}
    </Delay>
  )
}

import { Delay } from '@suspensive/react'

export const Example = () => (
  <div style={{ backgroundColor: 'lightblue' }}>
    <Delay ms={1500}>
      {({ isDelayed }) => (
        <div
          style={{
            opacity: isDelayed ? 1 : 0,
            transition: 'opacity 1500ms',
          }}
        >
          1500ms opacity trigger
        </div>
      )}
    </Delay>
  </div>
)

Open Sandbox

로딩 UI가 지연되어 노출되는 것이 때에 따라 더 좋은 사용성을 제공합니다.


import { Delay, Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense
    fallback={
      <Delay ms={200}>
        <Skeleton />
      </Delay>
    }
  >
    ...
  </Suspense>
)

Default ms

<Delay/>는 <DefaultPropsProvider/>와 함께 사용할 때 더욱 강력해집니다. <DefaultPropsProvider/>를 사용하여 여러 <Delay/> default ms를 제어합니다. 자세한 내용은 <DefaultPropsProvider/> 페이지에 소개되어 있습니다.

props.fallback

delay된 children 노출 전까지 보여줄 수 있는 fallback입니다.


import { Delay } from '@suspensive/react'
 
const Example = () => (
  <Delay ms={200} fallback={<>Fallback Text</>}>
    200ms delayed Text
  </Delay>
)

import { Delay } from '@suspensive/react'

export const Example = () => {
  return (
    <div style={{ padding: 20, backgroundColor: 'lightblue' }}>
      <Delay ms={1000} fallback={<>Fallback Text</>}>
        1s delayed Text
      </Delay>
    </div>
  )
}

Open Sandbox

Delay.with

Delay.with는 Delay를 사용하여 컴포넌트를 래핑하는 HOC입니다. Delay.with를 사용하면 컴포넌트를 쉽게 래핑할 수 있습니다.


import { Delay } from '@suspensive/react'
 
const Example = Delay.with({ ms: 2000 }, () => {
  return <>...</>
})