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.
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.
The node passed in overlay prop to
OverlayTriggeris 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
The code where this should be added is here: https://github.com/purposeindustries/intellyo-application-design-system/blob/2ea245e68e0aceaef3b2c826efa1339f9cf4e551/src/components/overlay-trigger/index.js#L126-L135
Maybe to prevent breaking changes and there can be others who rely on this sideeffect, it would be wise to introduce a
lazyRenderprop 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.