loading.js uses canvas-based animations and sketch instances have their own indicator

[Jextic]

Resolves #8922

Changes:

• Changed the CSS style loading indicator to a canvas-based loading indicator. It now uses a spinning p5 logo instead of a generic spinning circle. Thanks to Raphaël de Courville for the sketch code.
• Changed _createLoadingIndicator() to _createLoadingOverlay. _createLoadingOverlay creates another canvas (which will contain the loading indicator) right on top of the user's canvas (or default canvas).
• Helper functions _positionCanvas(), _removeLoadingOverlay(), and drawLoadingIndicator() were added to help center the loading indicator, remove it when it's no longer loading, and use draw the p5 logo using canvas functions.
• Registered the decorator _handleLoadingIndicator() to intercept the canvas whenever canvas-related functions (createCanvas, resizeCanvas, and noCanvas) are called on.

Screenshots of the change:

Video of instance mode sketches:

instance-mode-loading.mp4

This uses the instance mode sketch provided in the issue comment thread plus a modified version of the issue's first sketch example to show that the loading indicator will resize itself respectively to when the canvas resizes.

PR Checklist

• npm run lint passes
• Inline reference is included / updated

[p5-bot]

Continuous Release

CDN link

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

Published Packages

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

Commit hash: a6e57bc

Previous deployments

1c46bb1

• https://raw.esm.sh/pr/p5@1c46bb1/lib/p5.min.js
• https://pkg.pr.new/p5@1c46bb1

---

This is an automated message.

[limzykenneth]

@Jextic The test is failing because of https://github.com/processing/p5.js/blob/main/test/unit/core/loading.js#L9 passing null to the first argument of the loading addon function. You will need to pass in a mock, you can have a look at other test files on how to use the mock import { mockP5, mockP5Prototype } from '../../js/mocks';

[Jextic]

@limzykenneth Thank you. I changed the test files to use mockP5 and mockP5Prototype so the setup should work correctly now. I ran the test and everything passed except for the typography one.

[limzykenneth]

One inline and a couple related things:

1. Is there a way for the user to opt out of having the default loading animation?
2. Currently the loading animation will still draw on top of what the user already drawn in setup, is there an easy way to avoid it? eg.

async function setup() {
  createCanvas(400, 400);
  background(200);
  ellipse(width / 2, height / 2, 200);
  await new Promise((resolve) => setTimeout(resolve, 2000));
}

This will draw the loading animation on top of the background and ellipse which may not be ideal. Possibly the capability to disable this would be enough but if it can be done relatively manually it would be great as well.

[limzykenneth]

I think if this module explicitly expects to be running in the browser environment, rather than checking window here, it can instead be conditionally registered in main.js based on whether window is defined or not, so the decorator will never be registered if they are not needed as well.