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>
)

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 <SuspensiveProvider/>. Control multiple <Delay/>s default ms with <SuspensiveProvider/>. Details are introduced in <SuspensiveProvider/> 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>
)