✍️ We are working to prepare Suspensive v2 read more →



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

Delayed loading UI sometimes provides better usability

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

Default ms

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



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



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 }