Skip to main content
Elastic UI
Elastic UI
ComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Guidelines
    • Getting started
    • Accessibility
    • Writing
    • Testing
  • Theming
    • Theme provider
    • Color mode
    • High contrast mode
    • Borders
    • Breakpoints
    • Colors
    • Sizing
    • Typography
  • Templates
    • Page template
    • Sitewide search
  • Layout
    • Accordion
    • Bottom bar
    • Flex
    • Flyout
    • Header
    • Horizontal rule
    • Modal
    • Page components
    • Page header
    • Panel
    • Popover
    • Resizable container
    • Spacer
  • Navigation
    • Breadcrumbs
    • Buttons
    • Collapsible nav
    • Context menu
    • Facet
    • Key pad menu
    • Link
    • Pagination
    • Side nav
    • Steps
    • Tabs
    • Tree view
  • Display
    • Aspect ratio
    • Avatar
    • Badge
    • Callout
    • Card
    • Comment list
    • Description list
    • Drag and drop
    • Empty prompt
    • Health
    • Icons
    • Image
    • List group
    • Loading
    • Progress
    • Skeleton
    • Stat
    • Text
    • Timeline
    • Title
    • Toast
    • Tooltip
    • Tour
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
    • Tables
    • Data grid
  • Editors & Syntax
    • Code
    • Markdown
  • Utilities
    • Accessibility
    • Auto sizer
    • Beacon
    • Color palettes
    • Copy
    • CSS utility classes
    • Delay
    • Error boundary
    • Focus trap
    • Highlight and mark
    • HTML ID generator
    • I18n
    • Inner text
    • Mutation observer
    • Outside click detector
    • Overlay mask
    • Portal
    • Pretty duration
    • Provider
    • Resize observer
    • Scroll
    • Text diff
    • Text truncation
    • Window events
  • EUI
  • Utilities
  • Delay

Delay

Delay render

EuiDelayRender is a component for conditionally toggling the visibility of a child component. It will ensure that the child is hidden for at least 500ms (default). This allows delay UI rendering. That is helpful when you need to update aria live region(s) repeatedly.

Loading...

Delay hide

EuiDelayHide is a component for conditionally toggling the visibility of a child component. It will ensure that the child is visible for at least 1000ms (default). This avoids UI glitches that are common with loading spinners and other elements that are rendered conditionally and potentially for a short amount of time.

Loading...

Props

EuiDelayRender

๐˜‚๐˜‚
โœ„๐˜—โœ„๐˜—
Prop
โ†ฆ
Description and type
โ†ฆ
Default value
โ†ต
Prop
delay#
โ†ฆ
Description and type
Type: number
โ†ฆ
Default value
500
โ†ต
๐˜‚๐˜‚

EuiDelayHide

๐˜‚๐˜‚
โœ„๐˜—โœ„๐˜—
Prop
โ†ฆ
Description and type
โ†ฆ
Default value
โ†ต
Prop
render#
โ†ฆ
Description and type
Type: () => ReactNode
โ†ฆ
Default value
Required
โ†ต
Prop
hide#
โ†ฆ
Description and type
Type: boolean
โ†ฆ
Default value
false
โ†ต
Prop
minimumDuration#
โ†ฆ
Description and type
Type: number
โ†ฆ
Default value
1000
โ†ต
๐˜‚๐˜‚
Edit this page

Previous
CSS utility classes
Next
Error boundary
  • Delay render
  • Delay hide
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with โค by Elastic