From 716a05ed8673302129aecfc10f680cbf1fa882c7 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Mon, 16 May 2022 20:14:42 +0200
Subject: 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.
---
 src/app/browser.js | 45 ++++++++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 17 deletions(-)

(limited to 'src/app')

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) => {
-- 
cgit v1.2.3