feat: add option to hide large numbers of diffs to improve UI perform…

…ance

gitbutler-ui/src/lib/components/FileDiff.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import Button from './Button.svelte';
 	import HunkViewer from './HunkViewer.svelte';
 	import Icon from './Icon.svelte';
 	import { computeAddedRemovedByHunk } from '$lib/utils/metrics';
@@ -30,13 +31,22 @@
 
 	$: maxLineNumber = sections[sections.length - 1]?.maxLineNumber;
 	$: minWidth = getGutterMinWidth(maxLineNumber);
+
+	let alwaysShow = false;
 </script>
 
 <div class="hunks">
 	{#if isBinary}
 		Binary content not shown
 	{:else if isLarge}
 		Diff too large to be shown
+	{:else if sections.length > 50 && !alwaysShow}
+		<div class="flex flex-col p-1">
+			Change hidden as large numbers of diffs may slow down the UI
+			<Button kind="outlined" color="neutral" on:click={() => (alwaysShow = true)}
+				>show anyways</Button
+			>
+		</div>
 	{:else}
 		{#each sections as section}
 			{@const { added, removed } = computeAddedRemovedByHunk(section)}