diff options
| author | 0neGal <mail@0negal.com> | 2022-05-16 20:14:42 +0200 |
|---|---|---|
| committer | 0neGal <mail@0negal.com> | 2022-05-16 20:18:41 +0200 |
| commit | 716a05ed8673302129aecfc10f680cbf1fa882c7 (patch) | |
| tree | 1f49f082de5969a6c8314a0e11a3f8aa739f9525 | |
| parent | 0b893f9f2b01196b583222df072ae51631457649 (diff) | |
| download | Viper-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.
| -rw-r--r-- | src/app/browser.js | 45 |
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) => { |