[Query Copilot] Adding loading spinner for Copilot tab (#1494)

* Add loading spinner for react tabs

* Run prettier and import useTabs instead of passing it
This commit is contained in:
v-darkora
2023-06-26 09:13:30 +02:00
committed by GitHub
parent 15e8c66aa4
commit 0b6cb8ee3d
3 changed files with 21 additions and 1 deletions

View File

@@ -113,7 +113,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
<div className="tab_Content">
<span className="statusIconContainer" style={{ width: tabKind === ReactTabKind.Home ? 0 : 18 }}>
{useObservable(tab?.isExecutionError || ko.observable(false)) && <ErrorIcon tab={tab} active={active} />}
{useObservable(tab?.isExecuting || ko.observable(false)) && (
{isTabExecuting(tab, tabKind) && (
<img className="loadingIcon" title="Loading" src={loadingIcon} alt="Loading" />
)}
</span>
@@ -211,6 +211,15 @@ const onKeyPressReactTab = (e: KeyboardEvent, tabKind: ReactTabKind): void => {
}
};
const isTabExecuting = (tab?: Tab, tabKind?: ReactTabKind): boolean => {
if (useObservable(tab?.isExecuting || ko.observable(false))) {
return true;
} else if (tabKind !== undefined && tabKind !== ReactTabKind.Home && useTabs.getState()?.isTabExecuting) {
return true;
}
return false;
};
const getReactTabContent = (activeReactTab: ReactTabKind, explorer: Explorer): JSX.Element => {
switch (activeReactTab) {
case ReactTabKind.Connect: