admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix tooltip performances (#9930)

Browse Source 
Rendering the Tooltip is creating performance issues on the whole app.

In this PR we only render the tooltip on hover
This commit is contained in:
Charles Bochet
2025-01-30 12:37:56 +01:00
committed by GitHub
parent a039987549
commit ae4bf8d929
2 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-ui/src/display/tooltip/AppTooltip.tsx
View File

@ -50,6 +50,7 @@ export type AppTooltipProps = {
positionStrategy?: PositionStrategy; positionStrategy?: PositionStrategy;
clickable?: boolean; clickable?: boolean;
width?: string; width?: string;
isOpen?: boolean;
}; };
export const AppTooltip = ({ export const AppTooltip = ({
@ -65,6 +66,7 @@ export const AppTooltip = ({
children, children,
clickable, clickable,
width, width,
isOpen,
}: AppTooltipProps) => { }: AppTooltipProps) => {
const delayInMs = const delayInMs =
delay === TooltipDelay.noDelay delay === TooltipDelay.noDelay
@ -89,6 +91,7 @@ export const AppTooltip = ({
children, children,
clickable, clickable,
width, width,
isOpen,
}} }}
/> />
); );

46
packages/twenty-ui/src/display/tooltip/OverflowingTextWithTooltip.tsx
View File

@ -89,6 +89,7 @@ export const OverflowingTextWithTooltip = ({
const textRef = useRef<HTMLDivElement>(null); const textRef = useRef<HTMLDivElement>(null);
const [isTitleOverflowing, setIsTitleOverflowing] = useState(false); const [isTitleOverflowing, setIsTitleOverflowing] = useState(false);
const [shouldRenderTooltip, setShouldRenderTooltip] = useState(false);
const handleMouseEnter = () => { const handleMouseEnter = () => {
const isOverflowing = const isOverflowing =
@ -98,10 +99,12 @@ export const OverflowingTextWithTooltip = ({
: false; : false;
setIsTitleOverflowing(isOverflowing); setIsTitleOverflowing(isOverflowing);
setShouldRenderTooltip(true);
}; };
const handleMouseLeave = () => { const handleMouseLeave = () => {
setIsTitleOverflowing(false); setIsTitleOverflowing(false);
setShouldRenderTooltip(false);
}; };
const handleTooltipClick = (event: React.MouseEvent<HTMLDivElement>) => { const handleTooltipClick = (event: React.MouseEvent<HTMLDivElement>) => {
@ -137,26 +140,29 @@ export const OverflowingTextWithTooltip = ({
{text} {text}
</StyledOverflowingText> </StyledOverflowingText>
)} )}
{createPortal( {shouldRenderTooltip &&
<div onClick={handleTooltipClick}> isTitleOverflowing &&
<AppTooltip createPortal(
anchorSelect={`#${textElementId}`} <div onClick={handleTooltipClick}>
offset={5} <AppTooltip
hidden={!isTitleOverflowing || hideTooltip} anchorSelect={`#${textElementId}`}
noArrow offset={5}
place="bottom" hidden={!isTitleOverflowing || hideTooltip}
positionStrategy="absolute" noArrow
delay={TooltipDelay.mediumDelay} place="bottom"
> positionStrategy="absolute"
{isTooltipMultiline ? ( delay={TooltipDelay.mediumDelay}
<Styledpre>{text}</Styledpre> isOpen={true}
) : ( >
`${text || ''}` {isTooltipMultiline ? (
)} <Styledpre>{text}</Styledpre>
</AppTooltip> ) : (
</div>, `${text || ''}`
document.body, )}
)} </AppTooltip>
</div>,
document.body,
)}
</> </>
); );
}; };