Visual loading indicator fallback while assets are loading

[SableRaf]

Increasing access

This proposal aims to make p5.js more accessible and user-friendly, particularly for non-English speakers, by replacing the text-based "Loading" message with a simple loading animation.

Which types of changes would be made?

• Breaking change (Add-on libraries or sketches will work differently even if their code stays the same.)
• Systemic change (Many features or contributor workflows will be affected.)
• Overdue change (Modifications will be made that have been desirable for a long time.)
• Unsure (The community can help to determine the type of change.)

Most appropriate sub-area of p5.js?

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

What's the problem?

Currently, p5.js displays a text-based "Loading" message in the top-left corner of the page during the execution of the preload() function. This approach is not very visually engaging and can be confusing for end-users who do not understand English or have visual impairments.

A p5.js coder can replace "Loading" with a custom animation. This is mentioned in the preload() and the p5.js overview page but this option is still relatively hidden and not particularly beginner friendly. See this Coding Train tutorial on loading animations.

What's the solution?

Replace the text-based "Loading" message with a visual loading animation. This animation could be a simple, universally recognized loading indicator (e.g., spinning circle) that provides a visual cue to users that content is being loaded without relying on text. An animated loader also better conveys the fact that something is happening. We can use the afterPreload lifecycle event to trigger hiding the loading animation. Possibly, the loading animation itself could be user-overridable via a preloadAnimation() function.

Pros (updated based on community comments)

Accessibility: Enhances p5.js accessibility by providing a language-independent loading indicator.
User Experience: Improves the user experience with a more engaging and informative visual cue during load times.
Internationalization: Supports p5.js's goal of being globally accessible by removing language barriers in the loading process.
Visual identity: The default loading animation could be an opportunity to include subtle elements of the p5.js visual identity like the pink color.

Cons (updated based on community comments)

Intrusivity: Depending on its design, the loading animation may be perceived as intrusive. We can mitigate this by making it easy to change the animation or deactivate it, and add examples on the preload() reference page.

Proposal status

Under review

[perminder-17]

Thank you for bringing this up @SableRaf . I find your proposal satisfactory, and all the mentioned benefits make sense. Initially, I thought using text for loading, instead of animation, was to prevent confusion for users creating sketches and animations in p5.js.

I apologize if I am wrong but do you think using a loading animation might give a similar appearance to a sketch, causing potential confusion??

The default loading animation could be an opportunity to include subtle elements of the p5.js visual identity like the pink color.

What I think using this may also help in avoiding such misunderstandings.

[limzykenneth]

@SableRaf If we adopt async/await per #6767 would a loading indicator still be needed? With async/await there will not be a need for a separate preload() function and data loading probably will feel similar to the synchronous behaviour of Processing for example.

[SableRaf]

Thanks for your reply @limzykenneth. I'm not sure I fully understand the implications of using async/await for loading so take my feedback with a pinch of salt but, in cases where large files or many assets are being loaded, would a loading indicator could still be beneficial to inform users that the process is ongoing? Maybe it can be less intrusive, like a loading spinner in the top left corner.

[limzykenneth]

@SableRaf I was thinking something along those lines if we are to still retain the loading indicator with async/await. I believe that is possible, just wondering if it is something we want to keep around. I don't quite remember but does Processing do anything similar when waiting for slow file reads?

[SableRaf]

does Processing do anything similar when waiting for slow file reads?

Not that I'm aware, but file reads are probably faster with Java on Desktop, right?

[limzykenneth]

Yes, certainly with file read from disk definitely faster than file request over the network. So I think there are a few options:

• Full canvas blocking loading indicator - Similar to what we have now, perhaps visual instead, cons would be that it can seem intrusive
• Loading spinner/graphic in corner - Less intrusive (although not entirely unintrusive)
• Opt-in or Opt out for the above two - As part of the loading API, sketch author can decide whether to use the loading indicator or not through an additional argument. It provides choice but slightly complicates the API, also it is unclear whether loading indicator should be opt in or opt out
• No loading indicator at all - Likely closest to semantic JavaScript but long loading time can be misunderstood as performance issue

[SableRaf]

Thanks @limzykenneth, that sums it up perfectly!

I just thought of a way to make this work as opt-in in a relatively non-intrusive way: what if when files take a long time to load, we throw a warning message via the FES suggesting that the sketch author use the optional loader? For example:

🌸 It looks like your file is taking a bit longer to load than usual ⏳ Consider using loadingAnimation() to display a loading animation while your files are being loaded.

This way people would only be exposed to the feature when they need it.

[quinton-ashley]

In response to the opt-in idea from @SableRaf, if developers are loading assets locally or from the browser's cache, they wouldn't experience long loading times (unless they throttle with dev tools), so they wouldn't see the message suggesting to enable p5's loading animation.

No loading indicator at all - Likely closest to semantic JavaScript but long loading time can be misunderstood as performance issue

Is this the current behavior of p5 v2? That's fine in a majority of user experiences where a loading indicator is not needed, but not everyone has fast internet. If the responsibility falls to p5 dev users to provide their own loading screen, they may choose not to make one based on their own perception of how fast the sketch "should" load.

@perminder-17 brings up an interesting point

do you think using a loading animation might give a similar appearance to a sketch, causing potential confusion??

Yes, so I'd be nice to have an opt-out CSS loading animation, something simple like the p5 asterisk spinning above the canvas, still with "Loading..." text included, that would run until async setup is finished. Also the cursor could be changed to indicate loading too.

Although with async setup, users could easily display something static during loading, it'd also be good to offer updated tutorials on p5js.org that detail how users could opt-out of the default loading animation and implement their own custom loading animations. The tutorial could be suggested by p5 FES to users that use a lot of load* functions in their sketch. Something like this:

let finishedLoading = false;
let dog, cat;

async function setup() {
  createCanvas(200, 200);

  customLoader();
  // setup finishes immediately and
  // the default loading animation is not shown
}

async function customLoader() {
  dog = await loadImage('dog.png');
  cat = await loadImage('cat.png');

  // simulate long loading

  finishedLoading = true;
}

function draw() {
  if (!finishedLoading) {
   // show custom loading animation
   return;
  }
  // rest of the sketch that uses loaded assets
}

[ksen0]

Thanks for the discussion and ideas everyone, it would be great to see this implemented. This proposal has been accepted for implementation and is looking for a volunteer! This is a nice stand-alone feature, so it would be great to keep this open for new contributors - if you're already an established contributor, please check first if there are other issues "Ready for Work" in p5.js 2.x.

Solutions can include either/or:

1. Tutorial for beta.p5js.org (on p5.js-website 2.0 branch) that shows how to create a custom loading animation with async. For example, a background color and a simple text, which the user can control. As @quinton-ashley suggests, "The tutorial could be suggested by p5 FES to users that use a lot of load* functions in their sketch."
2. A CSS loading animation with cursor effects add-on library, which can provides loadingAnimation as a way to parameterize CSS loading. This would be a very small library, just the 1 method, but by making it separately first, it makes it possible to test it, iterate on what the parameters should be, and discuss it before making core API changes. Addon must be compatible with both 1.x and 2.0; there's a short example how to do that here.

🌼 Please keep in mind the original proposal's focus on i18n - for the tutorial solution, making some issues to request Tutorial's translation into other languages would be great; for the library, I think it's a bit more open how multi-language support can be provided. For example, rather than a spinning star animation, it could be a very simple animation of some "loading" text in many languages? Maybe it can be more creative than "loading?" 🌐

If you're new to p5.js contribution, welcome! Please be sure to read through the contributor guidelines, and keep in mind that you should not file a pull request (or start working on code changes) without a corresponding issue or before an issue has been approved for implementation and assigned.

PS: This message is part of cleaning up the p5.js 2.0 roadmap prior to release, to make outstanding more more approachable for new contributors. You can join the conversation about this new version on this Discourse thread or this GitHub thread!

[SableRaf]

Hi @ksen0 and thanks for the summary!

On the tutorial idea, I've updated a 1.x demo sketch of mine for async/await here. It could potentially be used as a basis for a tutorial on custom loaders. I'm curious if that's the direction you had in mind.

About the loading text idea, I'm wondering if it’s necessary? Visual loading indicators (not necessarily a spinning star) are pretty common, and I think most people would recognize them without text. But I know you had some thoughts about this, so I’m open to whatever makes most sense 😌

[quinton-ashley]

For example, rather than a spinning star animation, it could be a very simple animation of some "loading" text in many languages? Maybe it can be more creative than "loading?" 🌐

@ksen0 I like your idea! Including a spinning p5.js asterisk, the p5.js logo, or some other kind of branding would help to make it clear what's loading though.

@SableRaf The concern with a text-less loader from @perminder-17 was that people may confuse it for the art itself in cases where that could be initially ambiguous. Would you disagree?

Also I was under the impression that the loader would just cover individual p5 canvases and not the full page.

If we assume p5 users want viewers to be able to see their canvas content as soon as possible maybe just cutting to it or having a very short fade out may be preferable.

it would be great to keep this open for new contributors

I have some other suggestions for anyone that wants to implement this feature:

• the mouse cursor could also be set to indicate loading when hovering over the canvas that's loading (or just if any visible canvas is loading)
• we don't need users to see the loading animation at all if the sketch loads fast enough
• ideally a CSS loader has to be ready to go immediately, if it uses any images they need to be base64 embedded in the p5.js file

[perminder-17]

the mouse cursor could also be set to indicate loading when hovering over the canvas that's loading

I loved this idea, this could be great and we should consider a mouse cursor to be also set to indicate loading while hovering the canvas.

I don't know if that's feasible or maybe acceptable by other contributors/members, but what do you feel about just having a loading cursor to show a loading sketch? without any css loader or anything :"). It's just a thought, if hovering to the canvas or not, if my sketch is been loaded my cursor icon should change and looks like it's a loading cursor. Without any animation on the canvas?

[quinton-ashley]

Could be cool to have the mouse cursor become a spinning p5.js asterisk!

Partly I think this issue is trying to solve the problem of having a totally blank canvas (or purely static elements on it) during loading though.

[AhmedMagedC]

Hi, so I'm a new contributor I'm not yet familiar with the codebase
how can i get this issue assigned to me? do i need to provide basic ideas in advance?

[ksen0]

HI @AhmedMagedC welcome! There's a few different ideas here, have you had a chance to check the earlier comment out? From that and all the later comments and ideas, what do you think is most interesting and doable to you? To recap: the 2 options are to write a tutorial or to create an add-on library. The add-on library can explore any of the ideas listed here (cursor override, various loading text, etc), it's an open topic and when the first version is done others can iterate on it.

[AhmedMagedC]

I think the first one is more doable to me
If i understand the idea correctly, when setup function being async and when the loading takes too long (Or maybe many assets are being loaded ?)
a tutorial is suggested by p5 FES to users showing them how to create their own custom loading animation, so
my responsibility is to write that tutorial and to show that message when the loading takes too long?

[SableRaf]

Hi @ksen0 and all,

Last week, I took the liberty of putting together a proof of concept based on Kit's suggestions. It includes a randomized list of "Loading..." words in multiple languages, and an (optional) spinning p5.js logo for the cursor. Let me know if that's close to what you had in mind.

The code is available on OpenProcessing here: https://openprocessing.org/sketch/2619980

Thanks to @Stefterv for helping me figure out the lifecycle hooks in p5.js 2.0, and how to use p5.js for the loading animation (instead of CSS).

[VANSH3104]

@SableRaf, your loading animation is fantastic! The p5-branded spinner and multilingual support make this an elegant solution. Turning it into an add-on could be a brilliant idea

[AhmedMagedC]

Hi @ksen0 and thanks for the summary!

On the tutorial idea, I've updated a 1.x demo sketch of mine for async/await here. It could potentially be used as a basis for a tutorial on custom loaders. I'm curious if that's the direction you had in mind.

About the loading text idea, I'm wondering if it’s necessary? Visual loading indicators (not necessarily a spinning star) are pretty common, and I think most people would recognize them without text. But I know you had some thoughts about this, so I’m open to whatever makes most sense 😌

Hi SableRaf,
Thanks for the demo sketch! it could indeed be a good basis to helping writing the tutorial.
but I had an issue running your demo in 1.x versions, the image doesn't display after loading animation is done, when i tried to debug i found that draw function starts immediately, it doesn't wait for the async functions in setup to be awaited
so is this a normal behavior? also giving that it works normally in 2.0.0 version (draw function doesn't start until all async functions in setup is completed)

[AhmedMagedC]

Hi @ksen0 , how are you?
Just checking in to inform you I'm still interested in writing the tutorial, honestly I'm also interested in implementing the add-on library, but after finishing the tutorial

How to approach it?

so after reading through the comments, I think there are two main approaches for the user to create custom loading animation

1. using p5 visual elements to create it like what was mentioned by @quinton-ashley , also was done by this tutorial 9.14: Loading Animation - p5.js Tutorial

2. using CSS to create the animation, taking this demo sketch by @SableRaf as a strong reference

so should i create new issue on p5.js-website?

also any feedback would be highly appreciated ❤️

[SableRaf]

Hi @AhmedMagedC. I would recommend building on the approach I shared in my latest reply (and this proof of concept) rather than the earlier CSS-based prototype. This version is more aligned with p5.js v2.0 (using async/await) and relies fully on p5.js for rendering. It also has the advantage that the loader starts after the p5 canvas is created, so it can match the correct size. I understand the code might feel a bit more complex, but I'm happy to walk through it together if that would be helpful!

PS: @ksen0 let me know if that approach makes sense to you as well or if you have a different idea

[ksen0]

Hi @AhmedMagedC thanks so much for your enthusiasm!

Because the new sketch (this one) is much more complete and already reflects most of the current discussion I would agree with @SableRaf that it is the best place to start - and thanks to @SableRaf for both making the example and offering help if any is needed! I think it makes sense to focus on p5.js 2.0 implementation in this issue. This is pretty distinct from the topic of the the Coding Train loading tutorial video.

@AhmedMagedC given the above sketch, I think the tutorial version of the task can be to prepare a tutorial for p5.js website (in the 2.0 branch / for the beta.p5js.org website) walking through building this loading animation step by step, with the aim to help the user understand how this code works, and be able to customize (use different texts, and/or replace the cursor animation with something of their own). @SableRaf and others, does that seem reasonable to you?

You can check other tutorials (like the get started one) to see the level of detail here; they are very step by step and detailed. You could work on an add-on library instead or after if you prefer.

(Visually one thing that could be a little different is aligning left-to-right and right-to-left languages like this but that's just a thought! I think when tutorial and/or library is ready, it would be cool to invite more "loading" text translations.)

[AhmedMagedC]

@ksen0 Thanks for providing the bigger picture, I now fully understand what to do.

@SableRaf Thanks for providing this example, i will sure contact with you if i need help.

as for now i will preferably work on the add-on library

so @ksen0 can you assign this issue to me?

[ksen0]

Thanks @AhmedMagedC , add-on library sounds great, assigned!