[BUG] Layers flashing at old position before getting displayed at correct position

[DavidBruneHL]

Hello everyone!

In our company software we encountered a bug which I afterwards was also able to reproduce in a clean react app, suggesting that the bug actually occurs due to some internal react-laag implementation.

When we load our company software in a browser and hover over an element with a react-laag layer (e.g. tooltip), for a fraction of a second the layer becomes visible in the top left corner of the screen before jumping to its actual position near its element.
The same happens when we scroll the page and hover over the element again. The layer flashes at its last rendered location before jumping to the new location.
I believe this to happen because the layer gets rendered before its position is updated, thus it starts at position [0, 0] when loading the page and afterwards being visible at its last rendered location. It might also be related to some kind of performance issue as the bug occurs in our company software (where we use quite a few layers on every page) on every hover and in a clean react app very rarely.

How to reproduce:
Unfortunately, it's not too easy to reproduce and happens on a random basis.

1. Setup clean react app and install react-laag.
2. Add a single layer, e.g. tooltip.
3. While hovering over the element with the attached tooltip, move the mouse on the element and refresh the page rapidly.
4. On some refreshes the tooltip will flash in the top left corner.

Expected behavior
The layer should appear directly at its target location without flashing at its last rendered location.

Browser / OS:

• OS: Windows 10
• Browsers: Chrome (Version 105.0.5195.126), Firefox (Version 105.0), Edge (Version 105.0.1343.42)
• react-laag v2.0.4

Thanks in advance!

[Badr MAMATAHIR]

+1

[Yev Vlasenko]

+1 In my case there is no need to refresh page, if there are different layers used (for example, tooltip and dropdown), there is a chance one of them will be briefly flashed in the top-left corner

[gegorov]

+1 same here. i got top left flashing even with one layer used. and it is not consistent. sometimes it happens, and sometimes it is not, didn't manage to find a pattern to reproduce it on a constant basis.

[Evgeny Serdyukov]

+1 I have the same issue with the version 2.0.5. I created tooltips for table cells. The tooltip flashes on the previous location when I hover over another cell.

[Jakub Hromek]

You can temporary fix it by animation, for example with react-spring:

...

const [springs] = useSpring(() => (isOpen ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.9 }), [isOpen]);

return (
    <>
        {isOpen &&
            renderLayer(
                <animated.div
                    {...layerProps}
                    style={{
                        ...layerProps.style,
                        ...springs
                    }}
                >
                    Blabla....
                    <Arrow
                        {...arrowProps}
                        {...hoverProps}
                        size={8}
                        roundness={0}
                        borderWidth={1}
                        borderColor="#1b1f2326"
                        backgroundColor="#FFF"
                    />
                </animated.div>
            )}
...

or by framer-motion like is in documentation

https://storybook.react-laag.com/?path=/docs/tooltip--page