From 2ce3052378f1dd451b6e79a9179c0a9eebb1549d Mon Sep 17 00:00:00 2001 From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com> Date: Sat, 11 Oct 2025 13:43:14 +0200 Subject: [PATCH] fix: allow typing in global search while data loads MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove disabled attribute from search input and defer search execution until data is loaded. Users can now start typing immediately when opening global search (Cmd+K), improving perceived responsiveness. Search results are only computed once isLoadingInitialData is false. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../views/livewire/global-search.blade.php | 280 ++++++++---------- 1 file changed, 129 insertions(+), 151 deletions(-) diff --git a/resources/views/livewire/global-search.blade.php b/resources/views/livewire/global-search.blade.php index d8cbcf2d8..3df03ea0d 100644 --- a/resources/views/livewire/global-search.blade.php +++ b/resources/views/livewire/global-search.blade.php @@ -14,6 +14,11 @@ return []; } + // Don't execute search if data is still loading + if (this.isLoadingInitialData) { + return []; + } + const query = this.searchQuery.toLowerCase().trim(); const results = this.allSearchableItems.filter(item => { @@ -28,6 +33,12 @@ if (!this.searchQuery || this.searchQuery.length < 1) { return []; } + + // Don't execute search if data is still loading + if (this.isLoadingInitialData) { + return []; + } + const query = this.searchQuery.toLowerCase().trim(); if (query === 'new') { @@ -239,7 +250,8 @@ class="fixed top-0 left-0 z-99 flex items-start justify-center w-screen h-screen pt-[10vh]">
-
- + - + +
+ placeholder="Search resources, paths, everything (type new for create)..." x-ref="searchInput" + x-init="$watch('modalOpen', value => { if (value) setTimeout(() => $refs.searchInput.focus(), 100) })" + class="w-full pl-12 pr-32 py-4 text-base bg-white dark:bg-coolgray-100 border-none rounded-lg shadow-xl ring-1 ring-neutral-200 dark:ring-coolgray-300 dark:text-white placeholder-neutral-400 dark:placeholder-neutral-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base" />
/ or ⌘K to focus @@ -311,8 +323,8 @@ class="mt-2 bg-white dark:bg-coolgray-100 rounded-lg shadow-xl ring-1 ring-neutr class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"> - +
@@ -327,13 +339,11 @@ class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:
@if ($loadingServers) -
- - +
+ + @@ -343,8 +353,7 @@ class="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-coolgray-200 rounded-lg
@elseif (count($availableServers) > 0) @foreach ($availableServers as $index => $server) - @@ -388,10 +396,10 @@ class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:bo
@@ -406,13 +414,11 @@ class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:
@if ($loadingDestinations) -
- - +
+ + @@ -422,24 +428,22 @@ class="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-coolgray-200 rounded-lg
@elseif (count($availableDestinations) > 0) @foreach ($availableDestinations as $index => $destination) - @@ -461,10 +465,10 @@ class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:bo
@@ -479,13 +483,11 @@ class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:
@if ($loadingProjects) -
- - +
+ + @@ -495,8 +497,7 @@ class="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-coolgray-200 rounded-lg
@elseif (count($availableProjects) > 0) @foreach ($availableProjects as $index => $project) - @@ -540,10 +540,10 @@ class="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:bo
@@ -558,13 +558,11 @@ class="text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:
@if ($loadingEnvironments) -
- - +
+ + @@ -574,8 +572,7 @@ class="flex items-center gap-3 p-3 bg-neutral-50 dark:bg-coolgray-200 rounded-lg
@elseif (count($availableEnvironments) > 0) @foreach ($availableEnvironments as $index => $environment) - @@ -636,8 +632,7 @@ class="search-result-item block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-cool
- + {{ $result['name'] }} +
{{ $result['project'] }} / {{ $result['environment'] }}
@endif @if (!empty($result['description'])) -
+
{{ Str::limit($result['description'], 80) }}
@endif @@ -674,8 +667,8 @@ class="text-sm text-neutral-600 dark:text-neutral-400"> - +
@@ -705,16 +698,15 @@ class="search-result-item w-full text-left block px-4 py-3 hover:bg-yellow-50 da
- + class="h-5 w-5 text-yellow-600 dark:text-yellow-400" fill="none" + viewBox="0 0 24 24" stroke="currentColor"> +
-
+
{{ $item['name'] }}
@if (isset($item['quickcommand'])) @@ -722,8 +714,7 @@ class="font-medium text-neutral-900 dark:text-white truncate"> class="text-xs text-neutral-500 dark:text-neutral-400 shrink-0">{{ $item['quickcommand'] }} @endif
-
+
{{ $item['description'] }}
@@ -731,8 +722,8 @@ class="text-sm text-neutral-600 dark:text-neutral-400 truncate"> - +
@@ -817,8 +808,7 @@ class="search-result-item w-full text-left block px-4 py-3 hover:bg-yellow-50 da class="flex-shrink-0 w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/40 flex items-center justify-center"> + fill="none" viewBox="0 0 24 24" stroke="currentColor"> @@ -886,12 +876,10 @@ class="shrink-0 h-5 w-5 text-yellow-500 dark:text-yellow-400 self-center" if (firstInput) firstInput.focus(); }, 200); } - })" - class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen"> -
+
New Project @@ -928,12 +916,10 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 if (firstInput) firstInput.focus(); }, 200); } - })" - class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen"> -
+
New Server @@ -970,12 +956,10 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 if (firstInput) firstInput.focus(); }, 200); } - })" - class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen"> -
+
New Team @@ -1012,12 +996,10 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 if (firstInput) firstInput.focus(); }, 200); } - })" - class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen"> -
+
New S3 Storage @@ -1054,12 +1036,10 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 if (firstInput) firstInput.focus(); }, 200); } - })" - class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen"> -
+
New Private Key @@ -1096,12 +1076,10 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 if (firstInput) firstInput.focus(); }, 200); } - })" - class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen"> -
+
New GitHub App @@ -1128,4 +1106,4 @@ class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5
-
+
\ No newline at end of file