gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-12-18 14:31:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

Drastically improve render performance

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/lib/components/BranchFiles.svelte
View File

@ -39,8 +39,6 @@
<style lang="postcss"> <style lang="postcss">
.branch-files { .branch-files {
flex: 1; flex: 1;
display: flex;
flex-direction: column;
background: var(--clr-bg-1); background: var(--clr-bg-1);
border-radius: var(--radius-m) var(--radius-m) 0 0; border-radius: var(--radius-m) var(--radius-m) 0 0;
padding: 0 var(--size-14) var(--size-14); padding: 0 var(--size-14) var(--size-14);

28
app/src/lib/components/FileListItem.svelte
View File

@ -59,7 +59,7 @@
}); });
</script> </script>
<div class="list-item-wrapper"> <div class:list-item-wrapper={showCheckbox}>
{#if showCheckbox} {#if showCheckbox}
<Checkbox <Checkbox
small small
@ -128,16 +128,14 @@
else console.error('No files selected'); else console.error('No files selected');
}} }}
> >
<div class="info-wrap"> <div class="info">
<div class="info"> <img draggable="false" class="file-icon" src={getVSIFileIcon(file.path)} alt="js" />
<img draggable="false" class="file-icon" src={getVSIFileIcon(file.path)} alt="js" /> <span class="text-base-12 name">
<span class="text-base-12 name"> {file.filename}
{file.filename} </span>
</span> <span class="text-base-12 path">
<span class="text-base-12 path"> {file.justpath}
{file.justpath} </span>
</span>
</div>
</div> </div>
<FileStatusIcons {file} /> <FileStatusIcons {file} />
</div> </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 { .info {
display: flex; display: flex;
align-items: center; align-items: center;