From 85e3420f231a669a086fcf262199eb922c3edbcc Mon Sep 17 00:00:00 2001
From: Caleb Owens <hello@calebowens.com>
Date: Mon, 6 May 2024 00:31:11 +0100
Subject: [PATCH] Drastically improve render performance

When rendering 1900 odd files, flexbox can cause performance issues due to having to recalculate many times.

I've removed a selection of un-needed flex declarations which has improved perfomrance sugnificantly.
---
 app/src/lib/components/BranchFiles.svelte  |  2 --
 app/src/lib/components/FileListItem.svelte | 28 +++++++---------------
 2 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/app/src/lib/components/BranchFiles.svelte b/app/src/lib/components/BranchFiles.svelte
index 1b4d867cb..f80ab387b 100644
--- a/app/src/lib/components/BranchFiles.svelte
+++ b/app/src/lib/components/BranchFiles.svelte
@@ -39,8 +39,6 @@
 <style lang="postcss">
 	.branch-files {
 		flex: 1;
-		display: flex;
-		flex-direction: column;
 		background: var(--clr-bg-1);
 		border-radius: var(--radius-m) var(--radius-m) 0 0;
 		padding: 0 var(--size-14) var(--size-14);
diff --git a/app/src/lib/components/FileListItem.svelte b/app/src/lib/components/FileListItem.svelte
index a7c4baa63..b8850bdbf 100644
--- a/app/src/lib/components/FileListItem.svelte
+++ b/app/src/lib/components/FileListItem.svelte
@@ -59,7 +59,7 @@
 	});
 </script>
 
-<div class="list-item-wrapper">
+<div class:list-item-wrapper={showCheckbox}>
 	{#if showCheckbox}
 		<Checkbox
 			small
@@ -128,16 +128,14 @@
 			else console.error('No files selected');
 		}}
 	>
-		<div class="info-wrap">
-			<div class="info">
-				<img draggable="false" class="file-icon" src={getVSIFileIcon(file.path)} alt="js" />
-				<span class="text-base-12 name">
-					{file.filename}
-				</span>
-				<span class="text-base-12 path">
-					{file.justpath}
-				</span>
-			</div>
+		<div class="info">
+			<img draggable="false" class="file-icon" src={getVSIFileIcon(file.path)} alt="js" />
+			<span class="text-base-12 name">
+				{file.filename}
+			</span>
+			<span class="text-base-12 path">
+				{file.justpath}
+			</span>
 		</div>
 		<FileStatusIcons {file} />
 	</div>
@@ -170,14 +168,6 @@
 		}
 	}
 
-	.info-wrap {
-		display: flex;
-		align-items: center;
-		flex-grow: 1;
-		flex-shrink: 1;
-		gap: var(--size-10);
-		overflow: hidden;
-	}
 	.info {
 		display: flex;
 		align-items: center;