Adds progress indicator to graph searching

gitkraken · Oct 6, 2022 · fc7ebff · fc7ebff
1 parent f16ba53
commit fc7ebff
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 7 deletions.
diff --git a/src/webviews/apps/plus/graph/GraphWrapper.tsx b/src/webviews/apps/plus/graph/GraphWrapper.tsx
@@ -184,6 +184,7 @@ export function GraphWrapper({
 	const [searchResults, setSearchResults] = useState(results);
 	const [searchResultsError, setSearchResultsError] = useState(resultsError);
 	const [searchResultsHidden, setSearchResultsHidden] = useState(false);
+	const [searching, setSearching] = useState(false);
 
 	// working tree state
 	const [workingTreeStats, setWorkingTreeStats] = useState(
@@ -231,6 +232,7 @@ export function GraphWrapper({
 				setSearchResultsError(resultsError);
 				setSearchResults(results);
 				setSelectedRows(state.selectedRows);
+				setSearching(false);
 				break;
 			}
 			case DidChangeGraphConfigurationNotificationType:
@@ -311,11 +313,10 @@ export function GraphWrapper({
 		setSearchQuery(detail);
 
 		const isValid = detail.query.length >= 3;
-		if (!isValid) {
-			setSearchResults(undefined);
-		}
+		setSearchResults(undefined);
 		setSearchResultsError(undefined);
 		setSearchResultsHidden(false);
+		setSearching(isValid);
 		onSearch?.(isValid ? detail : undefined);
 	};
 
@@ -357,7 +358,13 @@ export function GraphWrapper({
 			if (searchIndex == -1) {
 				if (next) {
 					if (searchQuery != null && results?.paging?.hasMore) {
-						const moreResults = await onSearchPromise?.(searchQuery, { more: true });
+						setSearching(true);
+						let moreResults;
+						try {
+							moreResults = await onSearchPromise?.(searchQuery, { more: true });
+						} finally {
+							setSearching(false);
+						}
 						if (moreResults?.results != null && !('error' in moreResults.results)) {
 							if (count < moreResults.results.count) {
 								results = moreResults.results;
@@ -373,7 +380,13 @@ export function GraphWrapper({
 						searchIndex = 0;
 					}
 				} else if (direction === 'last' && searchQuery != null && results?.paging?.hasMore) {
-					const moreResults = await onSearchPromise?.(searchQuery, { limit: 0, more: true });
+					setSearching(true);
+					let moreResults;
+					try {
+						moreResults = await onSearchPromise?.(searchQuery, { limit: 0, more: true });
+					} finally {
+						setSearching(false);
+					}
 					if (moreResults?.results != null && !('error' in moreResults.results)) {
 						if (count < moreResults.results.count) {
 							results = moreResults.results;
@@ -660,6 +673,7 @@ export function GraphWrapper({
 							total={searchResults?.count ?? 0}
 							valid={Boolean(searchQuery?.query && searchQuery.query.length > 2)}
 							more={searchResults?.paging?.hasMore ?? false}
+							searching={searching}
 							value={searchQuery?.query ?? ''}
 							errorMessage={searchResultsError?.error ?? ''}
 							resultsHidden={searchResultsHidden}

diff --git a/src/webviews/apps/shared/components/search/search-box.ts b/src/webviews/apps/shared/components/search/search-box.ts
@@ -7,6 +7,7 @@ import { numberConverter } from '../converters/number-converter';
 import '../codicon';
 import type { SearchInput } from './search-input';
 import './search-input';
+import './../progress';
 
 export type SearchNavigationDirection = 'first' | 'previous' | 'next' | 'last';
 export interface SearchNavigationEventDetail {
@@ -35,9 +36,10 @@ const template = html<SearchBox>`<template>
 	></search-input>
 	<div class="search-navigation" aria-label="Search navigation">
 		<span class="count${x => (x.total < 1 && x.valid && x.resultsLoaded ? ' error' : '')}">
-			${when(x => x.total < 1, html<SearchBox>`${x => x.formattedLabel}`)}
+			${when(x => x.searching, html<SearchBox>`Searching...`)}
+			${when(x => !x.searching && x.total < 1, html<SearchBox>`${x => x.formattedLabel}`)}
 			${when(
-				x => x.total > 0,
+				x => !x.searching && x.total > 0,
 				html<SearchBox>`<span aria-current="step">${x => x.step}</span> of
 					<span
 						class="${x => (x.resultsHidden ? 'sr-hidden' : '')}"
@@ -90,6 +92,7 @@ Last Match (Shift+Click)"
 			></code-icon>
 		</button>
 	</div>
+	<progress-indicator active="${x => x.searching}"></progress-indicator>
 </template>`;
 
 const styles = css`
@@ -100,10 +103,14 @@ const styles = css`
 		gap: 0.8rem;
 		color: var(--color-foreground);
 		flex: auto 1 1;
+		position: relative;
 	}
 	:host(:focus) {
 		outline: 0;
 	}
+	progress-indicator {
+		bottom: -4px;
+	}
 
 	.search-navigation {
 		display: inline-flex;
@@ -202,6 +209,9 @@ export class SearchBox extends FASTElement {
 	@attr({ mode: 'boolean' })
 	more = false;
 
+	@attr({ mode: 'boolean' })
+	searching = false;
+
 	@attr({ mode: 'boolean' })
 	valid = false;