diff --git a/src/sql/base/browser/ui/panel/media/loading.svg b/src/sql/base/browser/ui/panel/media/loading.svg new file mode 100644 index 000000000000..440a6cbd646d --- /dev/null +++ b/src/sql/base/browser/ui/panel/media/loading.svg @@ -0,0 +1,29 @@ + + diff --git a/src/sql/base/browser/ui/panel/media/loading_inverse.svg b/src/sql/base/browser/ui/panel/media/loading_inverse.svg new file mode 100644 index 000000000000..8f5de179de32 --- /dev/null +++ b/src/sql/base/browser/ui/panel/media/loading_inverse.svg @@ -0,0 +1,31 @@ + + diff --git a/src/sql/base/browser/ui/panel/media/panel.css b/src/sql/base/browser/ui/panel/media/panel.css index 7f7a41d1d2b4..fc5ec320ecf9 100644 --- a/src/sql/base/browser/ui/panel/media/panel.css +++ b/src/sql/base/browser/ui/panel/media/panel.css @@ -88,6 +88,22 @@ panel { outline: none; } +.tabbedPanel .tabList .tab-header.loading, +.hc-light .tabbedPanel .tabList .tab-header.loading { + pointer-events:none; + cursor: not-allowed; + background-image: url("./loading.svg"); + background-position: center right 5px; + background-repeat: no-repeat; + background-size: 16px; + opacity: 0.5; +} + +.vs-dark .tabbedPanel .tabList .tab-header.loading, +.hc-black .tabbedPanel .tabList .tab-header.loading { + background-image: url("./loading_inverse.svg"); +} + .tabbedPanel.horizontal > .title .tabList .tab .tabLabel, .tabbedPanel.vertical > .title .tabList .tab .tabLabel { text-overflow: ellipsis; diff --git a/src/sql/base/browser/ui/panel/panel.component.ts b/src/sql/base/browser/ui/panel/panel.component.ts index 713aa3cc414d..28d2998d5dae 100644 --- a/src/sql/base/browser/ui/panel/panel.component.ts +++ b/src/sql/base/browser/ui/panel/panel.component.ts @@ -209,6 +209,10 @@ export class PanelComponent extends Disposable { } if (foundTab) { + // Don't do anything if the tab is loading + if (foundTab.loading) { + return; + } const tab = foundTab; // since we need to compare identifiers in this next step we are going to go through and make sure all tabs have one this._tabs.forEach(i => { diff --git a/src/sql/base/browser/ui/panel/tab.component.ts b/src/sql/base/browser/ui/panel/tab.component.ts index 338517ca584c..47d3ec599bef 100644 --- a/src/sql/base/browser/ui/panel/tab.component.ts +++ b/src/sql/base/browser/ui/panel/tab.component.ts @@ -32,6 +32,7 @@ export class TabComponent implements OnDestroy { private _selected = false; @Input() public identifier!: string; @Input() public type: TabType = 'tab'; + @Input() public loading: boolean = false; @Input() private visibilityType: 'if' | 'visibility' = 'if'; private rendered = false; private destroyed: boolean = false; diff --git a/src/sql/base/browser/ui/panel/tabHeader.component.ts b/src/sql/base/browser/ui/panel/tabHeader.component.ts index a799a71f6055..d330f01372ef 100644 --- a/src/sql/base/browser/ui/panel/tabHeader.component.ts +++ b/src/sql/base/browser/ui/panel/tabHeader.component.ts @@ -19,7 +19,7 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions'; @Component({ selector: 'tab-header', template: ` -