Created a loading indicator when the canvas is being set up

[Jextic]

Resolves #8922

Changes:

• Created loading.js file in p5.js/src/core. loading.js handles the logic for creating a loading indicator when the canvas is being set up. When showLoadingIndicator() is called, a div element with a "Loading..." text will be created. When hideLoadingIndicator() is called, the div element will be removed from the DOM.
• Modified main.js so that showLoadingIndicator() and hideLoadingIndicator() are called before and after await context.setup(). The loading indicators will only appear while the canvas is loading the setup() function in sketch.js.
• Created a loading.js unit test file in p5.js/test/unit/core. The test is was created based on the sample code from issue [p5.js 2.0+ Bug Report]: Loading indication #8922 to see if the loading indicator works as intended.

Screenshots of the change:

All tests, including loading.js, pass. The only exception is a typography which always failed, even before changes were made to the project.

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

Also worked with @joshin on this issue.

[ksen0]

Hi @Jextic thanks for putting this together and sorry for the long time to get to your comment, but please check the comment on the issue. If possible, to keep (1) non text based and (2) decoupled. I will be able to review this more deeply next week as well. Thanks for your work on this!

[p5-bot]

Continuous Release

CDN link

• https://raw.esm.sh/pr/p5@a736f86/lib/p5.min.js

Published Packages

• https://pkg.pr.new/p5@a736f86

Commit hash: a14c933

Previous deployments

---

This is an automated message.