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