From 96b5ac34df5ad7b2cb662dfccf9540a99014609a Mon Sep 17 00:00:00 2001
From: jbicker <jan.bicker@typefox.io>
Date: Fri, 29 Nov 2019 18:16:44 +0100
Subject: [PATCH] Added progressbar and minor changes

Signed-off-by: jbicker <jan.bicker@typefox.io>
---
 .../src/browser/style/index.css               |   3 +-
 .../vscode-extension-detail-widget-factory.ts |   7 +-
 .../detail/vscode-extension-open-handler.ts   |   8 +-
 .../vscode-extensions-detail-widget.tsx       |  32 +++--
 .../detail/vscx-detail-header-component.tsx   | 116 +++++++++++-------
 .../list/vscode-extensions-list-widget.tsx    |  11 +-
 .../view/list/vscode-extensions-widget.ts     |   7 ++
 .../browser/view/list/vscx-list-component.tsx |  12 +-
 .../view/list/vscx-list-item-component.tsx    |  63 ++++++----
 .../view/vscx-install-button-component.tsx    |  67 +++++-----
 .../src/browser/vscode-extensions-service.ts  |   4 +-
 .../src/browser/vscode-extensions-types.ts    |   1 -
 12 files changed, 204 insertions(+), 127 deletions(-)

diff --git a/packages/vscode-extensions/src/browser/style/index.css b/packages/vscode-extensions/src/browser/style/index.css
index 654fb7aa0d3af..9c7d0fd388e2e 100644
--- a/packages/vscode-extensions/src/browser/style/index.css
+++ b/packages/vscode-extensions/src/browser/style/index.css
@@ -62,7 +62,8 @@
 }
 
 .extensionButton.working {
-    background: none;
+    background: var(--theia-disabled-color1);
+    color: var(--theia-ui-font-color0);
 }
 
 .extensionButton.working:hover {
diff --git a/packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts b/packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts
index ffc8c6d8d0926..346d6c435ea92 100644
--- a/packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts
+++ b/packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts
@@ -21,6 +21,8 @@ import { VSCodeExtensionDetailWidget } from './vscode-extensions-detail-widget';
 import { VSCodeExtensionPartResolved } from '../../vscode-extensions-types';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export interface VSCodeExtensionDetailWidgetOptions {
     readonly extension: VSCodeExtensionPartResolved;
@@ -34,9 +36,12 @@ export class VSCodeExtensionDetailWidgetFactory implements WidgetFactory {
 
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCodeExtensionsModel) protected readonly model: VSCodeExtensionsModel;
+    @inject(ProgressLocationService) protected readonly progressLocationService: ProgressLocationService;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     async createWidget(options: VSCodeExtensionDetailWidgetOptions): Promise<VSCodeExtensionDetailWidget> {
-        const widget = new VSCodeExtensionDetailWidget(options, this.service, this.model);
+        const widget = new VSCodeExtensionDetailWidget(
+            options, this.service, this.model, this.progressService, this.progressLocationService);
         widget.id = 'vscode-extension:' + options.extension.name;
         widget.title.closable = true;
         widget.title.label = options.extension.name;
diff --git a/packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts b/packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts
index 5ac6d17552374..4659fc4761a87 100644
--- a/packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts
+++ b/packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts
@@ -21,13 +21,13 @@ import { VSCodeExtensionDetailWidget } from './vscode-extensions-detail-widget';
 import { VSCodeExtensionDetailWidgetOptions } from './vscode-extension-detail-widget-factory';
 
 export namespace VSCodeExtensionUri {
-    export const scheme = 'vscx';
+    export const scheme = 'vscode';
     export function toUri(extensionName: string): URI {
-        return new URI('').withScheme(scheme).withFragment(extensionName);
+        return new URI('').withScheme(scheme).withPath('extension/' + extensionName);
     }
     export function toExtensionName(uri: URI): string {
-        if (uri.scheme === scheme) {
-            return uri.fragment;
+        if (uri.scheme === scheme && uri.path.dir.toString() === 'extension') {
+            return uri.path.base;
         }
         throw new Error('The given uri is not an vscode extension URI, uri: ' + uri);
     }
diff --git a/packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx b/packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx
index 679ca0167439f..e127172248e44 100644
--- a/packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx
+++ b/packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx
@@ -20,35 +20,43 @@ import { VSCodeExtensionDetailWidgetOptions } from './vscode-extension-detail-wi
 import { VSCXDetailHeader } from './vscx-detail-header-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressService } from '@theia/core/lib/common';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
 
 export class VSCodeExtensionDetailWidget extends ReactWidget {
 
     constructor(
         protected readonly options: VSCodeExtensionDetailWidgetOptions,
         protected readonly service: VSCodeExtensionsService,
-        protected readonly model: VSCodeExtensionsModel
+        protected readonly model: VSCodeExtensionsModel,
+        protected readonly progressService: ProgressService,
+        protected readonly progressLocationService: ProgressLocationService
     ) {
         super();
         this.addClass('vscode-extension-detail');
+
+        this.id = options.extension.publisher + '-' + options.extension.name + '-' + 'detail';
+
         service.onDidUpdateInstalled(() => {
-            this.init();
+            this.update();
         });
-        this.init();
-    }
-
-    protected init(): void {
-        this.options.extension.busy = false;
         this.update();
     }
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            <VSCXDetailHeader extension={this.options.extension} service={this.service} />
-            <div className='extensionDocContainer flexcontainer'>
-                <div className='extensionDocumentation'>
-                    <span dangerouslySetInnerHTML={{ __html: this.options.readMe }} />
+                <VSCXDetailHeader
+                    toDispose={this.toDispose}
+                    id={this.id}
+                    progressLocationService={this.progressLocationService}
+                    progressService={this.progressService}
+                    extension={this.options.extension}
+                    service={this.service} />
+                <div className='extensionDocContainer flexcontainer'>
+                    <div className='extensionDocumentation'>
+                        <span dangerouslySetInnerHTML={{ __html: this.options.readMe }} />
+                    </div>
                 </div>
-            </div>
         </React.Fragment>;
     }
 
diff --git a/packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx b/packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx
index 020627bdd76f2..e2ffe289cf0d7 100644
--- a/packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx
+++ b/packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx
@@ -19,64 +19,82 @@ import { VSCodeExtensionPartResolved, VSCodeExtensionFullResolved } from '../../
 import { VSCXStars } from './vscx-stars-component';
 import { VSCXInstallButton } from '../vscx-install-button-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
+import { ProgressService, DisposableCollection } from '@theia/core/lib/common';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export class VSCXDetailHeader extends React.Component<VSCXDetailHeader.Props, VSCXDetailHeader.State> {
 
+    protected detailHeaderRef: (ref: HTMLElement | null) => void;
+    protected progressLocation: string;
+
     constructor(props: VSCXDetailHeader.Props) {
         super(props);
+
+        this.progressLocation = this.props.id;
+
+        this.detailHeaderRef = ref => {
+            if (ref) {
+                const onProgress = this.props.progressLocationService.onProgress(this.progressLocation);
+                this.props.toDispose.push(new ProgressBar({ container: ref, insertMode: 'prepend' }, onProgress));
+            }
+        };
     }
 
     render(): JSX.Element {
         const extension = this.props.extension as VSCodeExtensionFullResolved;
         return <React.Fragment>
-            <div className='extensionHeaderContainer'>
-                {
-                    extension.iconUrl ?
-                        <div className='extensionHeaderImage'>
-                            <div className='icon'>
-                                <img src={extension.iconUrl} />
+            <div ref={this.detailHeaderRef}>
+                <div className='extensionHeaderContainer'>
+                    {
+                        extension.iconUrl ?
+                            <div className='extensionHeaderImage'>
+                                <div className='icon'>
+                                    <img src={extension.iconUrl} />
+                                </div>
+                            </div> : ''
+                    }
+                    <div className='extensionMetaDataContainer'>
+                        <div className='extensionTitleContainer'>
+                            <h1 className='extensionName'>{extension.name}</h1>
+                            <div className='extensionSubtitle'>
+                                <div className='extensionAuthor'>{extension.publisher}</div>
+                                <span className='textDivider' />
+                                <div className='extensionVersion'>{extension.version}</div>
+                                {
+                                    extension.averageRating ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            <div className='extensionRatingStars'>
+                                                <VSCXStars number={extension.averageRating} />
+                                            </div>
+                                        </React.Fragment>
+                                        : ''
+                                }
+                                {
+                                    extension.repository ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            <a href={extension.repository} target='_blank'>Repository</a>
+                                        </React.Fragment>
+                                        : ''
+                                }
+                                {
+                                    extension.license ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            {extension.license}
+                                        </React.Fragment>
+                                        : ''
+                                }
                             </div>
-                        </div> : ''
-                }
-                <div className='extensionMetaDataContainer'>
-                    <div className='extensionTitleContainer'>
-                        <h1 className='extensionName'>{extension.name}</h1>
-                        <div className='extensionSubtitle'>
-                            <div className='extensionAuthor'>{extension.publisher}</div>
-                            <span className='textDivider' />
-                            <div className='extensionVersion'>{extension.version}</div>
-                            {
-                                extension.averageRating ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        <div className='extensionRatingStars'>
-                                            <VSCXStars number={extension.averageRating} />
-                                        </div>
-                                    </React.Fragment>
-                                    : ''
-                            }
-                            {
-                                extension.repository ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        <a href={extension.repository} target='_blank'>Repository</a>
-                                    </React.Fragment>
-                                    : ''
-                            }
-                            {
-                                extension.license ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        {extension.license}
-                                    </React.Fragment>
-                                    : ''
-                            }
                         </div>
+                        <div className='extensionDescription'>{extension.description}</div>
+                        <VSCXInstallButton
+                            extension={extension}
+                            service={this.props.service}
+                            progressService={this.props.progressService} progressLocation={this.progressLocation} />
                     </div>
-                    <div className='extensionDescription'>{extension.description}</div>
-                    <VSCXInstallButton
-                        service={this.props.service}
-                        extension={this.props.extension} />
                 </div>
             </div>
         </React.Fragment>;
@@ -85,8 +103,12 @@ export class VSCXDetailHeader extends React.Component<VSCXDetailHeader.Props, VS
 
 export namespace VSCXDetailHeader {
     export interface Props {
-        extension: VSCodeExtensionPartResolved
-        service: VSCodeExtensionsService
+        id: string;
+        toDispose: DisposableCollection;
+        extension: VSCodeExtensionPartResolved;
+        service: VSCodeExtensionsService;
+        progressService: ProgressService;
+        progressLocationService: ProgressLocationService;
     }
     export interface State {
 
diff --git a/packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx b/packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx
index 0814e81cf8da1..859c9af9ca8c0 100644
--- a/packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx
+++ b/packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx
@@ -22,6 +22,8 @@ import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
 import { VSCXList } from './vscx-list-component';
 import { VSCodeExtensionPart, VSCodeExtensionsLocation } from '../../vscode-extensions-types';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export const VSCodeExtensionsListOptions = Symbol('VSCodeExtensionsListOptions');
 
@@ -50,6 +52,8 @@ export class VSCodeExtensionsListWidget extends ReactWidget {
     @inject(VSCodeExtensionsListOptions) protected readonly options: VSCodeExtensionsListOptions;
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCodeExtensionsModel) protected readonly model: VSCodeExtensionsModel;
+    @inject(ProgressLocationService) protected readonly progressLocationService: ProgressLocationService;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     @postConstruct()
     protected init(): void {
@@ -64,7 +68,12 @@ export class VSCodeExtensionsListWidget extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            <VSCXList extensions={this.extensions} model={this.model} service={this.service} />
+            <VSCXList
+                progressLocation='vscode-extensions-list'
+                progressService={this.progressService}
+                extensions={this.extensions}
+                model={this.model}
+                service={this.service} />
         </React.Fragment>;
     }
 
diff --git a/packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts b/packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts
index 8be69286bddba..4814c0c0e36c2 100644
--- a/packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts
+++ b/packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts
@@ -20,6 +20,7 @@ import { VSCodeExtensionsSearchbarWidget } from './vscode-extensions-searchbar-w
 import { VSCodeExtensionsListWidget } from './vscode-extensions-list-widget';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsCommands } from '../../vscode-extensions-contribution';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export const VSCXInstalledList = Symbol('VSCXInstalledList');
 export const VSCXRegistryList = Symbol('VSCXList');
@@ -30,6 +31,8 @@ export class VSCodeExtensionsWidget extends ViewContainer {
     static ID = 'vscode-extensions';
     static LABEL = 'Extensions';
 
+    protected progressLocation: string;
+
     @inject(VSCodeExtensionsSearchbarWidget) protected readonly vscxSearchbar: VSCodeExtensionsSearchbarWidget;
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCXInstalledList) protected readonly vscxInstalledList: VSCodeExtensionsListWidget;
@@ -77,6 +80,10 @@ export class VSCodeExtensionsWidget extends ViewContainer {
             priority: 1,
             onDidChange
         });
+
+        this.progressLocation = 'vscode-extensions-list';
+        const onProgress = this.progressLocationService.onProgress(this.progressLocation);
+        this.toDispose.push(new ProgressBar({ container: this.node, insertMode: 'prepend' }, onProgress));
     }
 
     getSearchTerm(): string {
diff --git a/packages/vscode-extensions/src/browser/view/list/vscx-list-component.tsx b/packages/vscode-extensions/src/browser/view/list/vscx-list-component.tsx
index f37f21f2b2d95..c2817e6da91e7 100644
--- a/packages/vscode-extensions/src/browser/view/list/vscx-list-component.tsx
+++ b/packages/vscode-extensions/src/browser/view/list/vscx-list-component.tsx
@@ -19,6 +19,7 @@ import { VSCodeExtensionPart } from '../../vscode-extensions-types';
 import { VSCXListItem } from './vscx-list-item-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressService } from '@theia/core/lib/common';
 
 export class VSCXList extends React.Component<VSCXList.Props> {
 
@@ -27,7 +28,14 @@ export class VSCXList extends React.Component<VSCXList.Props> {
             {
                 this.props.extensions && this.props.extensions.length > 0 ?
                     this.props.extensions.map(extension =>
-                        <VSCXListItem key={extension.publisher + extension.name} model={this.props.model} service={this.props.service} extension={extension} />)
+                        <VSCXListItem
+                            progressLocation={this.props.progressLocation}
+                            progressService={this.props.progressService}
+                            key={extension.publisher + extension.name}
+                            model={this.props.model}
+                            service={this.props.service}
+                            extension={extension}
+                        />)
                     :
                     <div className='extensionHeaderContainer noExtensionFound'>
                         No Extensions Found
@@ -42,5 +50,7 @@ export namespace VSCXList {
         extensions?: VSCodeExtensionPart[];
         service: VSCodeExtensionsService;
         model: VSCodeExtensionsModel;
+        progressService: ProgressService,
+        progressLocation: string
     }
 }
diff --git a/packages/vscode-extensions/src/browser/view/list/vscx-list-item-component.tsx b/packages/vscode-extensions/src/browser/view/list/vscx-list-item-component.tsx
index 311ce9ff8bacd..4e26b5048263b 100644
--- a/packages/vscode-extensions/src/browser/view/list/vscx-list-item-component.tsx
+++ b/packages/vscode-extensions/src/browser/view/list/vscx-list-item-component.tsx
@@ -14,50 +14,59 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
- import * as React from 'react';
- import { VSCodeExtensionPartResolved, VSCodeExtensionPart } from '../../vscode-extensions-types';
+import * as React from 'react';
+import { VSCodeExtensionPartResolved, VSCodeExtensionPart } from '../../vscode-extensions-types';
 import { VSCXInstallButton } from '../vscx-install-button-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressService } from '@theia/core/lib/common';
 
- export class VSCXListItem extends React.Component<VSCXListItem.Props, VSCXListItem.State> {
-
+export class VSCXListItem extends React.Component<VSCXListItem.Props, VSCXListItem.State> {
+    protected headerContainer: HTMLElement | null;
     protected readonly extensionClick = () => this.props.service.openExtensionDetail(this.props.extension);
 
+    constructor(props: VSCXListItem.Props) {
+        super(props);
+    }
+
     render(): JSX.Element {
-        const { extension, service, model } = this.props;
+        const { extension, service, model, progressService, progressLocation } = this.props;
         const extensionResolved = new VSCodeExtensionPartResolved(extension, model);
         const tooltip = extension.description;
         const icon = extension.iconUrl;
         return <React.Fragment>
             <div key={extension.name} onClick={this.extensionClick} className='extensionHeaderContainer' title={tooltip}>
                 <div className='flexcontainer row'>
-                    {
-                        icon ?
-                            <div className='extensionIconContainer'>
-                                <div className='icon'>
-                                    <img src={icon} />
-                                </div>
-                            </div> : ''
-                    }
-                    <div className='extensionInformationContainer'>
-                        <div className={'column flexcontainer'}>
-                            <div className='row flexcontainer'>
-                                <div className='extensionName noWrapInfo'>{extension.displayName || extension.name}</div>
-                                <div className='extensionVersion'>{extension.version}</div>
-                            </div>
-                            <div className='row flexcontainer'>
-                                <div className='extensionDescription noWrapInfo'>{extension.description}</div>
-                            </div>
-                            <div className='row flexcontainer'>
-                                <div className='extensionAuthor noWrapInfo flexcontainer'>{extension.publisher}</div>
-                                <VSCXInstallButton service={service} extension={extensionResolved}/>
+                {
+                    icon ?
+                        <div className='extensionIconContainer'>
+                            <div className='icon'>
+                                <img src={icon} />
                             </div>
+                        </div> : ''
+                }
+                <div className='extensionInformationContainer'>
+                    <div className={'column flexcontainer'}>
+                        <div className='row flexcontainer'>
+                            <div className='extensionName noWrapInfo'>{extension.displayName || extension.name}</div>
+                            <div className='extensionVersion'>{extension.version}</div>
+                        </div>
+                        <div className='row flexcontainer'>
+                            <div className='extensionDescription noWrapInfo'>{extension.description}</div>
+                        </div>
+                        <div className='row flexcontainer'>
+                            <div className='extensionAuthor noWrapInfo flexcontainer'>{extension.publisher}</div>
+                            <VSCXInstallButton
+                                progressLocation={progressLocation}
+                                progressService={progressService}
+                                service={service}
+                                extension={extensionResolved} />
                         </div>
                     </div>
                 </div>
             </div>
-        </React.Fragment>;
+            </div>
+        </React.Fragment >;
     }
 }
 
@@ -66,6 +75,8 @@ export namespace VSCXListItem {
         service: VSCodeExtensionsService,
         model: VSCodeExtensionsModel,
         extension: VSCodeExtensionPart,
+        progressService: ProgressService,
+        progressLocation: string
     }
     export interface State {
 
diff --git a/packages/vscode-extensions/src/browser/view/vscx-install-button-component.tsx b/packages/vscode-extensions/src/browser/view/vscx-install-button-component.tsx
index 513ac4b4c7088..e9a8ca2ca0f16 100644
--- a/packages/vscode-extensions/src/browser/view/vscx-install-button-component.tsx
+++ b/packages/vscode-extensions/src/browser/view/vscx-install-button-component.tsx
@@ -17,8 +17,18 @@
 import * as React from 'react';
 import { VSCodeExtensionPartResolved } from '../vscode-extensions-types';
 import { VSCodeExtensionsService } from '../vscode-extensions-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export class VSCXInstallButton extends React.Component<VSCXInstallButton.Props, VSCXInstallButton.States> {
+
+    constructor(props: VSCXInstallButton.Props) {
+        super(props);
+
+        this.state = {
+            busy: false
+        };
+    }
+
     render(): JSX.Element {
         return <div className='extensionButtonContainer'>
             <div className='extensionButtonRow'>
@@ -27,13 +37,17 @@ export class VSCXInstallButton extends React.Component<VSCXInstallButton.Props,
         </div>;
     }
 
-    protected readonly onInstallButtonClicked = async () => {
-        this.props.extension.busy = true;
-        this.props.service.install(this.props.extension);
-    }
-    protected readonly onUninstallButtonClicked = async () => {
-        this.props.extension.busy = true;
-        this.props.service.uninstall(this.props.extension);
+    protected readonly onInstallButtonClicked = async (kind: 'install' | 'uninstall') => {
+        this.setState({ busy: true });
+        const progress = await this.props.progressService.showProgress({
+            text: `${kind}ing ${this.props.extension.displayName || this.props.extension.name}`,
+            options: {
+                location: this.props.progressLocation
+            }
+        });
+        await this.props.service[kind](this.props.extension);
+        progress.cancel();
+        this.setState({ busy: false });
     }
 
     protected createButtons(extension: VSCodeExtensionPartResolved): React.ReactNode[] {
@@ -42,36 +56,25 @@ export class VSCXInstallButton extends React.Component<VSCXInstallButton.Props,
         if (extension.installed) {
             btnLabel = 'Uninstall';
         }
+        if (extension.installed && this.state.busy) {
+            btnLabel = 'Uninstalling';
+        } else if (!extension.installed && this.state.busy) {
+            btnLabel = 'Installing';
+        }
 
-        const faEl = <i className='fa fa-spinner fa-pulse fa-fw'></i>;
-        const content = extension.busy ? faEl : btnLabel;
         buttonArr.push(<div
             key={'extensionDetailBtn' + btnLabel}
             className={'theia-button extensionButton' +
-                (extension.busy ? ' working' : '') + ' ' +
-                (extension.installed && !extension.busy ? ' installed' : '') + ' ' +
-                (extension.outdated && !extension.busy ? ' outdated' : '')}
+                (this.state.busy ? ' working' : '') + ' ' +
+                (extension.installed && !this.state.busy ? ' installed' : '') + ' ' +
+                (extension.outdated && !this.state.busy ? ' outdated' : '')}
             onClick={event => {
-                if (!extension.busy) {
-                    if (extension.installed) {
-                        this.onUninstallButtonClicked();
-                    } else {
-                        this.onInstallButtonClicked();
-                    }
+                if (!this.state.busy) {
+                    this.onInstallButtonClicked(extension.installed ? 'uninstall' : 'install');
                     event.stopPropagation();
                 }
             }}
-        >{content}</div>);
-
-        // if (extension.outdated) {
-        //     buttonArr.push(<div className={(extension.busy ? ' working' : '') + ' ' +
-        //                          'theia-button extensionButton' + (extension.outdated && !extension.busy ? ' outdated' : '')}
-        //         onClick={event => {
-        //             if (!extension.busy) {
-        //                 extension.update();
-        //             }
-        //         }}>{extension.busy ? faEl : 'Update'}</div>);
-        // }
+        >{btnLabel}</div>);
         return buttonArr;
     }
 }
@@ -79,10 +82,12 @@ export class VSCXInstallButton extends React.Component<VSCXInstallButton.Props,
 export namespace VSCXInstallButton {
     export interface Props {
         extension: VSCodeExtensionPartResolved,
-        service: VSCodeExtensionsService
+        service: VSCodeExtensionsService,
+        progressService: ProgressService,
+        progressLocation: string
     }
 
     export interface States {
-
+        busy: boolean;
     }
 }
diff --git a/packages/vscode-extensions/src/browser/vscode-extensions-service.ts b/packages/vscode-extensions/src/browser/vscode-extensions-service.ts
index 01733e4b9cd5d..c828702164360 100644
--- a/packages/vscode-extensions/src/browser/vscode-extensions-service.ts
+++ b/packages/vscode-extensions/src/browser/vscode-extensions-service.ts
@@ -31,7 +31,7 @@ export const ExtensionKeywords = Symbol('ExtensionKeyword');
 
 // for now to test the extension one has to start the Registry Server via https://gitpod.io/#https://github.com/theia-ide/extension-registry
 // and copy then the workspace url plus '/api' to here
-export const API_URL = 'https://8080-c5484d3a-4b1a-4f66-81aa-c5fbc0d8ee0e.ws-eu01.gitpod-staging.com/api';
+export const API_URL = 'https://8080-cf7d7977-531a-412f-94ca-628682426783.ws-eu01.gitpod.io/api';
 
 @injectable()
 export class VSCodeExtensionsService {
@@ -96,7 +96,7 @@ export class VSCodeExtensionsService {
     async uninstall(extension: VSCodeExtensionPart): Promise<void> {
         let res: () => void;
         const p = new Promise<void>(r => res = r);
-        setTimeout(() => res(), 2000);
+        setTimeout(() => res(), 3000);
         return p;
     }
 
diff --git a/packages/vscode-extensions/src/browser/vscode-extensions-types.ts b/packages/vscode-extensions/src/browser/vscode-extensions-types.ts
index 0abab4dfd5097..d80508baf11ca 100644
--- a/packages/vscode-extensions/src/browser/vscode-extensions-types.ts
+++ b/packages/vscode-extensions/src/browser/vscode-extensions-types.ts
@@ -53,7 +53,6 @@ export class VSCodeExtensionFull extends VSCodeExtensionPart {
 }
 
 export class VSCodeExtensionPartResolved extends VSCodeExtensionPart {
-    busy?: boolean;
     outdated?: boolean;
 
     constructor(extension: VSCodeExtensionPart, protected model: VSCodeExtensionsModel) {