From 299e7cf5cf87aedf53b97d002545031de49fc9b9 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sat, 6 Jul 2024 01:06:50 +0200
Subject: [PATCH] fix: improve performance of content search for large repos

---
 .../src/lib/components/ContentSearch.svelte   | 66 +++++++++++++++++--
 1 file changed, 62 insertions(+), 4 deletions(-)

diff --git a/frontend/src/lib/components/ContentSearch.svelte b/frontend/src/lib/components/ContentSearch.svelte
index 659f833f1c..4dc722363b 100644
--- a/frontend/src/lib/components/ContentSearch.svelte
+++ b/frontend/src/lib/components/ContentSearch.svelte
@@ -103,6 +103,20 @@
 					flows: getCounts(filteredFlowItems.length),
 					scripts: getCounts(filteredScriptItems.length)
 			  }
+
+	let showNbScripts = 10
+	let showNbApps = 10
+	let showNbResources = 10
+	let showNbFlows = 10
+
+	$: search && resetShows()
+
+	function resetShows() {
+		showNbScripts = 10
+		showNbApps = 10
+		showNbResources = 10
+		showNbFlows = 10
+	}
 </script>
 
 <SearchItems
@@ -280,7 +294,7 @@
 						{#if search.trim().length > 0}
 							<div class="flex flex-col gap-4">
 								{#if (searchKind == 'all' || searchKind == 'scripts') && filteredScriptItems?.length > 0}
-									{#each filteredScriptItems ?? [] as item}
+									{#each filteredScriptItems.slice(0, showNbScripts) ?? [] as item}
 										<div>
 											<div class="text-sm font-semibold"
 												><a href="/scripts/get/{item.path}">Script: {item.path}</a></div
@@ -308,9 +322,20 @@
 											</div>
 										</div>
 									{/each}
+									{#if filteredScriptItems.length > showNbScripts}
+										<a
+											href="#"
+											class="text-center font-semibold cursor-pointer pb-40"
+											on:click={() => {
+												showNbScripts += 30
+											}}
+										>
+											({showNbScripts} of {filteredScriptItems.length}) Show more scripts
+										</a>
+									{/if}
 								{/if}
 								{#if (searchKind == 'all' || searchKind == 'resources') && filteredResourceItems?.length > 0}
-									{#each filteredResourceItems ?? [] as item}
+									{#each filteredResourceItems.slice(0, showNbResources) ?? [] as item}
 										<div>
 											<div class="text-sm font-semibold">Resource: {item.path}</div>
 											<div class="flex gap-2 justify-between">
@@ -320,9 +345,20 @@
 											</div>
 										</div>
 									{/each}
+									{#if filteredResourceItems.length > showNbResources}
+										<a
+											href="#"
+											class="text-center font-semibold cursor-pointer pb-40"
+											on:click={() => {
+												showNbResources += 30
+											}}
+										>
+											({showNbResources} of {filteredResourceItems.length}) Show more resources
+										</a>
+									{/if}
 								{/if}
 								{#if (searchKind == 'all' || searchKind == 'flows') && filteredFlowItems?.length > 0}
-									{#each filteredFlowItems ?? [] as item}
+									{#each filteredFlowItems.slice(0, showNbFlows) ?? [] as item}
 										<div>
 											<div class="text-sm font-semibold"
 												><a href="/flows/get/{item.path}">Flow: {item.path}</a></div
@@ -347,10 +383,21 @@
 												</div>
 											</div>
 										</div>
+										{#if filteredFlowItems.length > showNbFlows}
+											<a
+												href="#"
+												class="text-center font-semibold cursor-pointer pb-40"
+												on:click={() => {
+													showNbScripts += 30
+												}}
+											>
+												({showNbFlows} of {filteredFlowItems.length}) Show more flows
+											</a>
+										{/if}
 									{/each}
 								{/if}
 								{#if (searchKind == 'all' || searchKind == 'apps') && filteredAppItems?.length > 0}
-									{#each filteredAppItems ?? [] as item}
+									{#each filteredAppItems.slice(0, showNbApps) ?? [] as item}
 										<div>
 											<div class="text-sm font-semibold"
 												><a href="/apps/get/{item.path}">App: {item.path}</a></div
@@ -362,6 +409,17 @@
 											</div>
 										</div>
 									{/each}
+									{#if filteredAppItems.length > showNbApps}
+										<a
+											href="#"
+											class="text-center font-semibold cursor-pointer pb-40"
+											on:click={() => {
+												showNbApps += 30
+											}}
+										>
+											({showNbApps} of {filteredAppItems.length}) Show more apps
+										</a>
+									{/if}
 								{/if}
 							</div>
 						{:else}