Delay

props.ms

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

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

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

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

💡

Default ms

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

props.fallback

⚠️

<Delay/>의 fallback는 실험 기능이므로 이 인터페이스는 변경될 수 있습니다

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

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

withDelay

🚫

deprecated: 대신 wrap.Delay().on을 사용하세요

withDelay를 사용하면 컴포넌트를 <Delay/>로 쉽게 래핑할 수 있습니다. 아래와 같이 withDelay를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다. withDelay의 두 번째 인자는 children이 없는 <Delay/>의 props입니다.

import { withDelay } from '@suspensive/react'
 
const Example = withDelay(
  function Component() {
    return <>...</>
  },
  { ms: 200 }
)