mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Parallelize asset loading

Browse source
This commit is contained in:
schlagmichdoch 2023-12-13 19:20:57 +01:00
parent 9847feeb52
commit d8f9532039
1 changed files with 30 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

52
public/scripts/main.js
View file

@ -56,13 +56,16 @@ class PairDrop {
await this.backgroundCanvas.fadeIn(); await this.backgroundCanvas.fadeIn();
// Load deferred assets // Load deferred assets
console.log("Load deferred assets...");
await this.loadDeferredAssets(); await this.loadDeferredAssets();
console.log("Loading of deferred assets completed."); console.log("Loading of deferred assets completed.");
console.log("Hydrate UI...");
await this.hydrate(); await this.hydrate();
console.log("UI hydrated."); console.log("UI hydrated.");
// Evaluate url params as soon as ws is connected // Evaluate url params as soon as ws is connected
console.log("Evaluate URL params when websocket connection is established.");
Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true}); Events.on('ws-connected', _ => this.evaluateUrlParams(), {once: true});
} }
@ -102,14 +105,11 @@ class PairDrop {
} }
} }
async loadDeferredAssets() { loadDeferredAssets() {
console.log("Load deferred assets"); const stylePromises = this.deferredStyles.map(url => this.loadAndApplyStylesheet(url));
for (const url of this.deferredStyles) { const scriptPromises = this.deferredScripts.map(url => this.loadAndApplyScript(url));
await this.loadAndApplyStylesheet(url);
} return Promise.all([...stylePromises, ...scriptPromises]);
for (const url of this.deferredScripts) {
await this.loadAndApplyScript(url);
}
} }
loadStyleSheet(url) { loadStyleSheet(url) {
@ -125,13 +125,16 @@ class PairDrop {
}); });
} }
async loadAndApplyStylesheet(url) { loadAndApplyStylesheet(url) {
try { return new Promise( async (resolve) => {
await this.loadStyleSheet(url); try {
console.log(`Stylesheet loaded successfully: ${url}`); await this.loadStyleSheet(url);
} catch (error) { console.log(`Stylesheet loaded successfully: ${url}`);
console.error('Error loading stylesheet:', error); resolve();
} } catch (error) {
console.error('Error loading stylesheet:', error);
}
});
} }
loadScript(url) { loadScript(url) {
@ -145,13 +148,16 @@ class PairDrop {
}); });
} }
async loadAndApplyScript(url) { loadAndApplyScript(url) {
try { return new Promise( async (resolve) => {
await this.loadScript(url); try {
console.log(`Script loaded successfully: ${url}`); await this.loadScript(url);
} catch (error) { console.log(`Script loaded successfully: ${url}`);
console.error('Error loading script:', error); resolve();
} } catch (error) {
console.error('Error loading script:', error);
}
});
} }
async hydrate() { async hydrate() {
@ -223,6 +229,8 @@ class PairDrop {
// remove url params from url // remove url params from url
const urlWithoutParams = getUrlWithoutArguments(); const urlWithoutParams = getUrlWithoutArguments();
window.history.replaceState({}, "Rewrite URL", urlWithoutParams); window.history.replaceState({}, "Rewrite URL", urlWithoutParams);
console.log("URL params evaluated.");
} }
} }