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.
This commit is contained in:
Caleb Owens 2024-05-06 00:31:11 +01:00
parent 442ff9dbac
commit 85e3420f23
2 changed files with 9 additions and 21 deletions

View File

@ -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);

View File

@ -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;