Delay

props.ms

이 컴포넌트는 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

로딩 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