Do not render the overlay element in OverlayTrigger

[oroce]

The node passed in overlay prop to OverlayTrigger is rendered all the time. Which doesn't make sense. Real life example: if there's a notification icon in the header which triggers the notification popup to be shown (similarly to facebook) and there's an error in the popover the whole application will crash. Moreover it needs more resource to render that mostly not opened component.

So we shouldn't render the overlay element until the state becomes active.

Basically

render() {
  return (<div>
    { this.state.isActive && (this.props.overlay) }
  </div>)
}

The code where this should be added is here:

intellyo-application-design-system/src/components/overlay-trigger/index.js

Lines 126 to 135 in 2ea245e

	{ React.cloneElement(this.props.overlay, {
	className: classNames(this.props.overlay.props.className, 'overlay'),
	onClick: (e) => {
	if (this.props.overlay.props.onClick) {
	e.preventDefault();
	this.props.overlay.props.onClick();
	}
	},
	innerRef: (c) => (this.popper = findDOMNode(c))
	}) }

Maybe to prevent breaking changes and there can be others who rely on this sideeffect, it would be wise to introduce a lazyRender prop and if that's true we should postpone all the rendering as we can. But performance wise and being mobile friendly I would definately make the lazyrendering default.