[p5.js 2.0+ Bug Report]: Loading indication

[ksen0]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0+

Web browser and version

any

Operating system

any

Steps to reproduce this

Steps:

1. Run the below code
2. Observe that while loading, the canvas is blank with no feedback to user at all (this is a regression compared to p5.js version 1)

Snippet:

// for p5.js versions 2.0 or later only
async function setup() {	
  createCanvas(400, 400);

  // Delay to simulate loading large files (for demo only, not actual usage)
  await fakeLoad(7000);
 
  // Your usual setup things below
  background("#EB5580");
  fill(255);
  circle(width / 2, height / 2, 100);
}

function draw() {
  circle(mouseX, mouseY, 20);
}

async function fakeLoad(delay) {
  await new Promise(resolve => setTimeout(resolve, delay));
}

[ksen0]

A minimal PR on the main p5.js branch for loading indicator should have the following effect. When the example code is run, there should be a "Loading..." indication. The actual content of this indication can be made more complex in the future (to reflect the discussion in this thread) but it should be as minimal as possible for now, and it should work without any changes to the code above.

EDITED to add: The solution should also be isolated in the codebase and extensible in the future. You can check #6795 for a discussion of future updates, but please do not implement any of the idea in that thread; this issue is specifically about "Loading" state in p5.js.

Also note that sketches like this:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  circle(mouseX, mouseY, 20);
}

should still work and not have excessive loading messages anywhere. The solution should not rely on background().

Please feel free to @ me and @limzykenneth if you're uncertain or have other ideas!

This Issue has been reserved for the CodeDay microinternship. If it is not complete within that internship in the next couple of months, then we will release it to volunteers. Thanks for understanding!

[BHARATH0153]

@ksen0 @davepagurek @perminder-17 I have a minimal approach for this after createCanvas() runs inside async setup, set an internal _loading = true flag on the p5 instance. Before the draw loop starts, check this flag and render a "Loading..." text on the canvas. Once setup resolves, clear the flag and proceed normally. The user's code needs zero changes. Does this sound like the right direction? Happy to open a PR once the approach is agreed on.

[ksen0]

Hi everyone, this is reserved for the CodeDay microinternship. If it is not completed by them, then it can be opened to volunteers. But for now, please do not make PRs or volunteer - thanks for understanding!