perf(react): ⚡️ render only visible canvas area

[theashraf]

This update optimizes the rendering performance by ensuring that only the visible portion of the canvas is rendered, utilizing the dotlottie-web setViewport API.

Changes:

• Implemented a getCanvasViewport function to accurately determine the visible area of the canvas within the viewport, considering the device pixel ratio.
• update canvas viewport using Dotlottie instance setViewport api on frame event (before rendering each frame)

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 0a754d88df0c31c49ad78c51c8af61e11e72cd15

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

| Name | Type | | ---------------------------- | ----- | | @lottiefiles/dotlottie-react | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions[bot]]

Coverage Report for @lottiefiles/dotlottie-web (packages/web)

Status	Category	Percentage	Covered / Total
🟢	Lines	77.06% / 77%	289 / 375
🟢	Statements	74.44% / 74%	303 / 407
🟢	Functions	75.24% / 75%	76 / 101
🟢	Branches	67.69% / 67%	197 / 291

File Coverage

No changed files found.

Generated in workflow #1086

[github-actions[bot]]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
@lottiefiles/dotlottie-web	13.43 KB (0%)	269 ms (0%)	769 ms (+148.61% 🔺)	1.1 s
@lottiefiles/dotlottie-web WASM	416.88 KB (0%)	8.4 s (0%)	0 ms (+100% 🔺)	8.4 s
@lottiefiles/dotlottie-react	17.25 KB (+0.68% 🔺)	345 ms (+0.68% 🔺)	518 ms (-58.16% 🔽)	863 ms
@lottiefiles/dotlottie-vue	20.14 KB (0%)	403 ms (0%)	982 ms (+43.73% 🔺)	1.4 s
@lottiefiles/dotlottie-wc	21.16 KB (0%)	424 ms (0%)	1.8 s (+23.46% 🔺)	2.2 s
@lottiefiles/dotlottie-svelte	21.07 KB (0%)	422 ms (0%)	478 ms (-7.31% 🔽)	899 ms
@lottiefiles/dotlottie-solid	20.18 KB (0%)	404 ms (0%)	699 ms (+10.4% 🔺)	1.2 s