Skip to content

Use sequential loading and requests for all UI resources #5013

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.

Sign up for GitHub

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

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Use sequential loading and requests for all UI resources #5013

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8fc6cac
use sequential loading for all UI resources
DedeHai Oct 19, 2025
31618c2
Merge branch 'main' into sequential_requests
DedeHai Nov 13, 2025
3778b25
bugfix in connectWs(), insert CSS before existing style, remove callb…
DedeHai Nov 13, 2025
e0155d4
fix indentation
DedeHai Nov 13, 2025
86b9556
bugfixes
DedeHai Nov 13, 2025
523f944
simplified preset loading
DedeHai Nov 13, 2025
ebdddfa
bugfix & optimization
DedeHai Nov 13, 2025
6351ea0
make retry local per function to avoid race condition
DedeHai Nov 13, 2025
3a003db
fix local retry causing infinite retries
DedeHai Nov 13, 2025
633d661
fix UI bug
DedeHai Nov 16, 2025
75413ff
change loading sequence, fixes palette loading bug, made populatePres…
DedeHai Nov 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions wled00/data/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,35 @@ function tooltip(cont=null) {
});
});
};
// sequential loading of external resources (JS or CSS) with retry, calls init() when done
function loadResources(files, init) {
let i = 0;
const loadNext = () => {
if (i >= files.length) {
if (init) {
d.documentElement.style.visibility = 'visible'; // make page visible after all files are laoded if it was hidden (prevent ugly display)
d.readyState === 'complete' ? init() : window.addEventListener('load', init);
}
return;
}
const file = files[i++];
const isCSS = file.endsWith('.css');
const el = d.createElement(isCSS ? 'link' : 'script');
Copy link
Collaborator

@blazoncek blazoncek Oct 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you choose to implement JS loading as that already have a function for that, loadJS().

Copy link
Collaborator Author

@DedeHai DedeHai Oct 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

my function loads JS and CSS, I did not understand the purpose of the already implemented one. maybe they can be combined?

Copy link
Collaborator Author

@DedeHai DedeHai Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took a look at it and the two functions do server quite different purposes, unifying them does not really make sense and will just make the code more complex, at least that is how it looks to me.

if (isCSS) {
el.rel = 'stylesheet';
el.href = file;
} else {
el.src = file;
}
el.onload = () => { setTimeout(loadNext, 0);};
el.onerror = () => {
i--; // load this file again
setTimeout(loadNext, 100);
};
d.head.appendChild(el);
};
loadNext();
}
// https://www.educative.io/edpresso/how-to-dynamically-load-a-js-file-in-javascript
function loadJS(FILE_URL, async = true, preGetV = undefined, postGetV = undefined) {
let scE = d.createElement("script");
Expand Down
Loading