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

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...

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?

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.

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]);

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

	useEffect(() => {
	const observer = new IntersectionObserver(([entry]) => {
	entry.isIntersecting
	? rive && rive.startRendering()
	: rive && rive.stopRendering();
	});

	if (canvasElem) {
	observer.observe(canvasElem);
	}

	return () => {
	observer.disconnect();
	};
	}, [rive, canvasElem]);