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 of <Delay/> is experimental feature, this interfaces could be changed

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

withDelay

🚫

deprecated: Use wrap.Delay().on instead

We can use withDelay to wrap component by <Delay/> easily. we don't need to make unncessary code to wrap it if we use withDelay like below. withDelay's 2nd parameter is props of <Delay/> without children

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