perf: optimize canvas rendering and reduce CPU usage

[Ashutoshx7]

Summary

This PR optimizes the rendering pipeline to significantly improve Music Blocks performance, especially during idle states and project loading.

Changes Made

1. Optimized refreshCanvas() method (js/activity.js)

• Replaced setTimeout with requestAnimationFrame for browser-optimized rendering
• Removed redundant stage.clear() call
• Eliminated double stage.update() calls that were causing unnecessary repaints
• Added proper debouncing with _pendingRefresh flag

2. Smart Ticker Optimization (js/activity.js)

• Ticker now only updates the stage when there are active animations or pending updates
• Condition: if (this.update || createjs.Tween.hasActiveTweens())
• Prevents 60 unnecessary frame updates per second when app is idle

3. Removed Duplicate Ticker (index.html)

• Removed redundant createjs.Ticker.addEventListener("tick", stage) that was causing double rendering
• Ticker is now managed solely by Activity class

4. Faster Turtle Initialization (js/turtles.js)

• Replaced 2000ms setTimeout delay with requestAnimationFrame
• Turtle properties now apply on the next frame instead of waiting 2 seconds

Performance Improvements

Metric	Before	After
Idle CPU usage	~60 updates/sec	Only when needed
Turtle init time	2000ms delay	~16ms
Frame updates	120/sec (duplicate)	60/sec max

Expected Impact

• ~95% lower CPU usage when idle
• ~2 seconds faster project load time
• Smoother animations at consistent 60fps
• Better battery life on mobile devices

Testing

• App loads correctly
• Blocks render and are draggable
• Palette interactions work
• Turtle animations function properly
• ESLint passes with no errors

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[walterbender]

Please resolve the conflict in js/activity. Also, is this redundant in light of #5091

Also, why are there changes to index.html here?

[Ashutoshx7]

Please resolve the conflict in js/activity. Also, is this redundant in light of #5091

Also, why are there changes to index.html here?

index.html change removes duplicate Ticker that was causing 120fps instead of 60fps
The large diff was due to Prettier, now fixed
commits from the previous pr followed here

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.

[github-actions]

✅ All Jest tests passed! This PR is ready to merge.