Delay

This component can be used in two ways:

Delay the exposure of children.
If children is a render prop, it passes a flag at the delayed time.

props.ms

1. Delay the exposure of children

This component delays the exposure of children by ms. In the code below, exposure of children is delayed by 200ms.


import { Delay } from '@suspensive/react'
 
const Example = () => (
  <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. Pass a delayed flag to children

If children is a render prop, it passes a flag instead of controlling the exposure. In the code below, isDelayed is passed as true after 200ms.


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

Delayed loading UI sometimes provides better usability


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

💡

Default ms

<Delay/> are more powerful when used with <DefaultPropsProvider/>. Control multiple <Delay/>s default ms with <DefaultPropsProvider/>. Details are introduced in <DefaultPropsProvider/> page.

props.fallback

fallback will be shown before the delayed exposure of children.


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 <>...</>
})