Getting [Violation] 'requestAnimationFrame' handler took <N>ms

[ankitpyash]

Overview

I am using @lottiefiles/dotlottie-react with lottie json files

code sample below

import React, { Suspense, useEffect, useMemo, useState } from 'react'; import Loader from '../loader/Loader'; import { DotLottie, DotLottieReact } from '@lottiefiles/dotlottie-react';

type DotLottieAnimationProps = { animationData: string | object; width?: number; height?: number; loop?: boolean; autoplay?: boolean; backgroundColor?: string; className?: string; style?: React.CSSProperties; };

export const DotLottieAnimation: React.FC<DotLottieAnimationProps> = ({ animationData,

className = '',
style = {},

}) => { const [dotLottie, setDotLottie] = useState<DotLottie>(); const memoizedAnimationData = useMemo(() => { if (typeof animationData === 'object' && animationData !== null) { return JSON.stringify(animationData); } return animationData; }, [animationData]);

// Callback function to get the player instance
const handleDotLottieRef = (instance: DotLottie | null) => {
	setDotLottie(instance as DotLottie);
};

useEffect(() => {
	// The cleanup function runs when the component unmounts.
	return () => {
		// Call the destroy method on the dotLottie player instance
		dotLottie?.destroy();
	};
}, [dotLottie]); // Empty dependency array ensures this effect runs only on mount and unmount

return (
	<>
		<div className={`dotlottie-container ${className}`} style={style}>
			<Suspense fallback={<Loader />}>
				<DotLottieReact
					data={memoizedAnimationData} // 'src' prop expects the animation data (URL or JSON string)
					dotLottieRefCallback={handleDotLottieRef}
					useFrameInterpolation={false}
					loop
					autoplay
				/>
			</Suspense>
		</div>
	</>
);

};

Due to this issue browser starts handing in few minutes ...

Consuming repo

What repo were you working in when this issue occurred?

...

Labels

• [x] Add the Type: Bug label to this issue.

[theashraf]

related #565

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs.