bug: rive animations can get "stuck" in a stopped rendering state due to IntersectionObserver

[aroman]

We've tracked a nasty race condition down in our product that ultimately we determined was caused by rive-react's usage of the IntersectionObserver to pause rendering while canvases are occluded.

In certain circumstances, this effect can cause the canvas to get "stuck" in a stopped-rendering state. Simply running startRendering() on a canvas in this state fixes the issue.

Our temporary workaround is to call startRendering() periodically every 100ms to ensure these get un-stuck. However, obviously, this should be fixed...

[bodymovin]

Hey! Can you share some basic steps to reproduce it?
Do you happen to know if it's while scrolling, on load, or when components are reordered in the DOM?

[MrRoboman]

Linking our thread in the community:
https://rive.app/community/forums/support/fsnLLkXUaA62/react-rive-animations-getting-stuck/ftTlrwM2cxuq

As mentioned there, we've noticed it when reordering DOM elements, resizing the window, leaving and coming back to the tab... sometimes it seems to happen without any apparent explanation.

[MrRoboman]

The code we think is causing the problem:

rive-react/src/hooks/useRive.tsx

Lines 150 to 164 in 8bb5652

	useEffect(() => {
	const observer = new IntersectionObserver(([entry]) => {
	entry.isIntersecting
	? rive && rive.startRendering()
	: rive && rive.stopRendering();
	});
	if (canvasElem) {
	observer.observe(canvasElem);
	}
	return () => {
	observer.disconnect();
	};
	}, [rive, canvasElem]);

[DCDRins]

Have the same problem
"startRendering" never happens, animation is stuck

Rive animation should be anywhere, but out of viewport for the first render.

UPD: if it's not enough to understand the prob, let me know and I will share a real life example of this bug