-
-
Notifications
You must be signed in to change notification settings - Fork 3.5k
Visual loading indicator fallback while assets are loading #6795
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
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??
What I think using this may also help in avoiding such misunderstandings. |
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. |
@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? |
Not that I'm aware, but file reads are probably faster with Java on Desktop, right? |
Yes, certainly with file read from disk definitely faster than file request over the network. So I think there are a few options:
|
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:
This way people would only be exposed to the feature when they need it. |
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.
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
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
} |
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:
🌼 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! |
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 😌 |
@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.
I have some other suggestions for anyone that wants to implement this feature:
|
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? |
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. |
Hi, so I'm a new contributor I'm not yet familiar with the codebase |
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. |
I think the first one is more doable to me |
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). |
@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 |
Hi SableRaf, |
Hi @ksen0 , how are you? 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
so should i create new issue on p5.js-website? also any feedback would be highly appreciated ❤️ |
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 |
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 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.) |
Thanks @AhmedMagedC , add-on library sounds great, assigned! |
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?
Most appropriate sub-area of p5.js?
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 apreloadAnimation()
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
The text was updated successfully, but these errors were encountered: