@bigfishtv/cockpit/src/components/DelayVisible.js

import { Component } from 'react'
import PropTypes from 'prop-types'

export default class DelayVisible extends Component {
	static defaultProps = {
		visible: true,
		delay: 500, //ms
	}
	static propTypes = {
		visible: PropTypes.bool,
		delay: PropTypes.number,
	}
	state = {
		show: false,
	}
	componentDidMount() {
		if (this.props.visible) this.scheduleDisplay()
	}
	componentDidUpdate(prevProps) {
		if (prevProps.visible && !this.props.visible) {
			clearTimeout(this.timeoutId)
			if (this.state.show) {
				this.setState({ show: false })
			}
		} else if (!prevProps.visible && this.props.visible) {
			this.scheduleDisplay()
		}
	}
	componentWillUnmount() {
		clearTimeout(this.timeoutId)
	}
	scheduleDisplay() {
		clearTimeout(this.timeoutId)
		this.timeoutId = setTimeout(() => this.setState({ show: true }), this.props.delay)
	}
	render() {
		if (!this.state.show) return null
		return this.props.children
	}
}