DelayWrapper

A React component that provides delay logic for loading states to prevent UI flashing for quick operations and ensure minimum display duration.

Features

Delay before showing: Prevents loading UI from appearing for quick operations (default: 100ms)
Minimum display duration: Ensures loading UI stays visible for a minimum time once shown (default: 200ms)
Customizable timing: Configurable delay and minimum duration values
Fallback support: Optional fallback UI to show while delayed
Reusable: Can wrap any loading UI component

Usage

Basic Usage

import DelayWrapper from '../flowbot/components/delay-wrapper'

function MyComponent ({ loading }) {
  return (
    <DelayWrapper loading={loading}>
      <Spinner size={16} />
    </DelayWrapper>
  )
}

With Custom Timing

<DelayWrapper loading={loading} delay={150} minDuration={300}>
  <div className='loading-indicator'>Loading...</div>
</DelayWrapper>

With Fallback UI

<DelayWrapper
  loading={loading}
  fallback={<div className='placeholder'>Ready to load...</div>}
>
  <Spinner size={16} />
</DelayWrapper>

In Lookup Controls

The PositionedSpinner component in lookup-controls.jsx uses DelayWrapper internally:

<PositionedSpinner loading={loading} gridded={props.gridded} size={16} />

Props

Prop	Type	Default	Description
`loading`	`boolean`	-	The loading state
`delay`	`number`	`100`	Delay before showing the loading UI (in milliseconds)
`minDuration`	`number`	`200`	Minimum duration to show the loading UI (in milliseconds)
`children`	`React.ReactNode`	-	The loading UI component to render
`fallback`	`React.ReactNode`	`null`	Optional fallback UI to show while delayed

Behavior

Loading starts: Component waits for delay milliseconds before showing loading UI
Loading stops before delay: Loading UI never appears, component returns to initial state
Loading stops after delay but before minDuration: Loading UI continues to show for the remaining time to reach minDuration
Loading stops after minDuration: Loading UI disappears immediately
New loading starts: Resets the delay timer and starts the process again

Examples

Quick Query (Sub-100ms)

Loading starts → Wait 100ms → Loading stops → UI never shows

Medium Query (200ms total, stops at 150ms after showing)

Loading starts → Wait 100ms → Show UI → Loading stops at 150ms → Wait 50ms → Hide UI

Long Query (500ms total)

Loading starts → Wait 100ms → Show UI → Loading stops at 500ms → Hide UI immediately

The key insight is that minDuration only applies when loading stops before the minimum time has elapsed. If loading continues beyond the minimum duration, the loading UI disappears immediately when loading stops.