Delay

props.ms

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

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