aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-05-16 20:14:42 +0200
committer0neGal <mail@0negal.com>2022-05-16 20:18:41 +0200
commit716a05ed8673302129aecfc10f680cbf1fa882c7 (patch)
tree1f49f082de5969a6c8314a0e11a3f8aa739f9525 /src/app
parent0b893f9f2b01196b583222df072ae51631457649 (diff)
downloadViper-716a05ed8673302129aecfc10f680cbf1fa882c7.tar.gz
Viper-716a05ed8673302129aecfc10f680cbf1fa882c7.zip
majorly improved performance
Instead of setting the innerHTML every single time an element get added it now just appends them like you should be doing, but I was lazy when I wrote the original code I guess. Not only does this improve performance, but it also fixes the CSS fade animation not making every mod element/entry flicker, and instead now it only does it on the new ones, like intended.
Diffstat (limited to 'src/app')
-rw-r--r--src/app/browser.js45
1 files changed, 28 insertions, 17 deletions
diff --git a/src/app/browser.js b/src/app/browser.js
index 0646ad1..4d14885 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -144,11 +144,11 @@ var Browser = {
}
if (pkgs.length == 0 || isEnd) {
- browserEntries.innerHTML += `<div class="message">${lang('gui.browser.endoflist')}</div>`
+ Browser.msg(`${lang('gui.browser.endoflist')}`)
return
}
- browserEntries.innerHTML += `<div class="message"><button id="loadmore">${lang("gui.browser.loadmore")}</button></div>`
+ Browser.msg(`<button id="loadmore">${lang("gui.browser.loadmore")}</button>`)
loadmore.addEventListener("click", () => {
Browser.loadpkgs(pkgs);
Browser.endoflist(pkgs);
@@ -233,6 +233,13 @@ var Browser = {
count++;
packagecount++;
}
+ },
+ msg: (html) => {
+ let msg = document.createElement("div");
+ msg.classList.add("message");
+ msg.innerHTML = html;
+
+ browserEntries.appendChild(msg);
}
}
@@ -304,23 +311,27 @@ function BrowserEl(properties) {
}
}
}
-
- browserEntries.innerHTML += `
- <div class="el" id="mod-${normalize(properties.title)}">
- <div class="image">
- <img src="${properties.image}">
- <img class="blur" src="${properties.image}">
- </div>
- <div class="text">
- <div class="title">${properties.title}</div>
- <div class="description">${properties.description}</div>
- <button class="install" onclick='installFromURL("${properties.download}", ${JSON.stringify(properties.dependencies)}, true)'>${installstr}</button>
- <button class="info" onclick="require('electron').shell.openExternal('${properties.url}')">${lang('gui.browser.info')}</button>
- <button class="visual">${properties.version}</button>
- <button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
- </div>
+
+ let entry = document.createElement("div");
+ entry.classList.add("el");
+ entry.id = `mod-${normalize(properties.title)}`;
+
+ entry.innerHTML = `
+ <div class="image">
+ <img src="${properties.image}">
+ <img class="blur" src="${properties.image}">
+ </div>
+ <div class="text">
+ <div class="title">${properties.title}</div>
+ <div class="description">${properties.description}</div>
+ <button class="install" onclick='installFromURL("${properties.download}", ${JSON.stringify(properties.dependencies)}, true)'>${installstr}</button>
+ <button class="info" onclick="require('electron').shell.openExternal('${properties.url}')">${lang('gui.browser.info')}</button>
+ <button class="visual">${properties.version}</button>
+ <button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
</div>
`
+
+ browserEntries.appendChild(entry);
}
ipcRenderer.on("removedmod", (event, mod) => {