Add progress indicator to Search

packages/search-in-workspace/src/browser/search-in-workspace-result-tree-widget.tsx

@@ -43,6 +43,7 @@ import { MEMORY_TEXT } from './in-memory-text-resource';
 import URI from '@theia/core/lib/common/uri';
 import * as React from 'react';
 import { SearchInWorkspacePreferences } from './search-in-workspace-preferences';
+import { ProgressService } from '@theia/core';
 
 const ROOT_ID = 'ResultTree';
 
@@ -117,6 +118,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
     @inject(WorkspaceService) protected readonly workspaceService: WorkspaceService;
     @inject(TreeExpansionService) protected readonly expansionService: TreeExpansionService;
     @inject(SearchInWorkspacePreferences) protected readonly searchInWorkspacePreferences: SearchInWorkspacePreferences;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     constructor(
         @inject(TreeProps) readonly props: TreeProps,
@@ -207,6 +209,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             this.refreshModelChildren();
             return;
         }
+        const progress = await this.progressService.showProgress({ text: `search: ${searchTerm}`, options: { location: 'search' } });
         const searchId = await this.searchService.search(searchTerm, {
             onResult: (aSearchId: number, result: SearchInWorkspaceResult) => {
                 if (token.isCancellationRequested || aSearchId !== searchId) {
@@ -242,6 +245,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
                 }
             },
             onDone: () => {
+                progress.cancel();
                 if (token.isCancellationRequested) {
                     return;
                 }
@@ -257,6 +261,7 @@ export class SearchInWorkspaceResultTreeWidget extends TreeWidget {
             }
         }, searchOptions).catch(e => { return; });
         token.onCancellationRequested(() => {
+            progress.cancel();
             if (searchId) {
                 this.searchService.cancel(searchId);
             }

packages/search-in-workspace/src/browser/search-in-workspace-widget.tsx

@@ -23,6 +23,8 @@ import * as ReactDOM from 'react-dom';
 import { Event, Emitter, Disposable } from '@theia/core/lib/common';
 import { WorkspaceService } from '@theia/workspace/lib/browser';
 import { SearchInWorkspaceContextKeyService } from './search-in-workspace-context-key-service';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export interface SearchFieldState {
     className: string;
@@ -81,6 +83,9 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
     @inject(SearchInWorkspaceContextKeyService)
     protected readonly contextKeyService: SearchInWorkspaceContextKeyService;
 
+    @inject(ProgressLocationService)
+    protected readonly progressLocationService: ProgressLocationService;
+
     @postConstruct()
     protected init(): void {
         this.id = SearchInWorkspaceWidget.ID;
@@ -139,6 +144,9 @@ export class SearchInWorkspaceWidget extends BaseWidget implements StatefulWidge
         }));
 
         this.toDispose.push(this.resultTreeWidget);
+
+        const onProgress = this.progressLocationService.onProgress('search');
+        this.toDispose.push(new ProgressBar({ container: this.node, insertMode: 'prepend' }, onProgress));
     }
 
     storeState(): object {

packages/search-in-workspace/src/browser/styles/index.css

@@ -21,7 +21,7 @@
 
 .t-siw-search-container {
     color: var(--theia-ui-font-color1);
-    padding: 1px 5px;
+    padding: 5px ;
     display: flex;
     flex-direction: column;
     height: 100%;