Page Goes Blank/White Momentarily When Scrolling Fast with Rive Animations

[ZenoLAK]

Description: I've integrated Rive animations into my Nextjs project using @rive-app/react-canvas. The animations load and function correctly, but I've encountered an issue where the page goes blank or white for a moment when scrolling quickly. This problem is intermittent and seems to occur on certain OS and browser combinations. Also this problem starts happening when multiple animations are present on a single page and appears once they are loaded.

Steps to Reproduce:

1. Integrate Rive animations using the provided AnimationComponent in a React project.
2. Deploy the project and access it on an iPhone 13 using Chrome or Safari, or on an iPhone 11 using Safari.
3. Scroll quickly up and down the page.

Expected Behavior: The page should scroll smoothly without any interruptions or blank/white screens.

Actual Behavior: The page intermittently goes blank/white for a moment when scrolling fast. The animations themselves load and function fine.

Affected OS and Browsers:

1. iPhone 13: Occurs on both Chrome and Safari.
2. iPhone 11: Occurs only on Safari ( chrome is fine).
3. Macbook air ( macOS Ventura 13.4 ) : Occurs on safari ( on chrome its fine)

library version: @rive-app/react-canvas: 4.12.1, next: 13.1.2

My code: Parent Component: {section.animation && ( <div className="relative"> <AnimationComponent src={section.animation} /> )}

Animation Component:
import React, { useState } from "react"; import { useStateMachineInput, useRive } from "@rive-app/react-canvas"; import Spinner from "./Spinner";

interface AnimationComponentProps { src: string; }

const AnimationComponent: React.FC<AnimationComponentProps> = ({ src }) => { const [isAnimationLoaded, setIsAnimationLoaded] = useState(false);

const { RiveComponent, rive } = useRive({ src: src, stateMachines: "State Machine 1", autoplay: true, onLoad: () => { setIsAnimationLoaded(true); }, });

return ( <> {!isAnimationLoaded && ( <div className="md:flex-1 md:h-96 h-64 border rounded shadow mx-auto my-20"> <Spinner /> )} <div className="md:flex-1 md:h-96 h-64 border rounded shadow mx-auto my-20" style={{ display: isAnimationLoaded ? "block" : "none", }} // Hide animation until loaded > <RiveComponent /> </> ); };

export default AnimationComponent;