diff --git a/src/app/ItemPage.js b/src/app/ItemPage.js index ff611b4..5ac9812 100644 --- a/src/app/ItemPage.js +++ b/src/app/ItemPage.js @@ -896,7 +896,7 @@ function SpeciesFaceOption({ return ( {({ css }) => ( - - + + )} + + ); +} + +/** + * DeferredTooltip is like Chakra's , but it waits until `isOpen` is + * true before mounting it, and unmounts it after closing. + * + * This can drastically improve render performance when there are lots of + * tooltip targets to re-render… but it comes with some limitations, like the + * extra requirement to control `isOpen`, and some additional DOM structure! + */ +function DeferredTooltip({ children, isOpen, ...props }) { + const [shouldShowTooltip, setShouldShowToolip] = React.useState(isOpen); + + React.useEffect(() => { + if (isOpen) { + setShouldShowToolip(true); + } else { + const timeoutId = setTimeout(() => setShouldShowToolip(false), 500); + return () => clearTimeout(timeoutId); + } + }, [isOpen]); + + return ( + + {({ css }) => ( +
+ {children} + {shouldShowTooltip && ( + +
+ + )} +
)} );