Fixing GIF ordering issues with files with a large number of frames

[alx-zhu]

Resolves

Resolves #5875

Before: Out of order GIFs after costume upload:

Screen.Recording.2024-12-08.at.4.18.34.PM.mov

After: In order GIF after costume upload:

Screen.Recording.2024-12-08.at.4.20.44.PM.mov

Proposed Changes

Modify the function handleNewCostume in src/containers/costume-tab.jsx to send costumes sequentially to the Scratch VM using async await syntax to ensure a costume is received by the VM before moving onto the next.

Reason for Changes

1. Large GIF frames were being added out of order when uploaded as costumes because they were being sent in parallel to the Scratch VM. Confirmed that the frames are in order when processed in src/lib/gif-decoder.js, src/lib/file-uploader.js, AND src/containers/costume-tab.jsx, but were received out of order by scratch-vm/src/virtual-machine.js in the addCostume function.

2. Updated to modern async await syntax to handle Promises, which is the most up-to-date method of managing Promises in JS.

Test Coverage

Before:

Unit tests:

Costume test:

After:

Unit Tests

Costume tests:

Browser Coverage

Check the OS/browser combinations tested (At least 2)

Mac

• Chrome
• Firefox
• Safari

Windows

• Chrome
• Firefox
• Edge

Chromebook

• Chrome

iPad

• Safari

Android Tablet

• Chrome

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[alx-zhu]

I have read the CLA Document and I hereby sign the CLA

[sherryzhuge1]

I have read the CLA Document and I hereby sign the CLA

[HeidiTao]

I have read the CLA Document and I hereby sign the CLA