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

* Add loading spinner for react tabs

* Run prettier and import useTabs instead of passing it

src/Explorer/QueryCopilot/QueryCopilotTab.tsx

@@ -39,6 +39,7 @@ import SplitterLayout from "react-splitter-layout";
 import CopilotIcon from "../../../images/Copilot.svg";
 import ExecuteQueryIcon from "../../../images/ExecuteQuery.svg";
 import SaveQueryIcon from "../../../images/save-cosmos.svg";
+import { useTabs } from "../../hooks/useTabs";
 
 interface QueryCopilotTabProps {
   initialInput: string;
@@ -73,6 +74,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   const generateSQLQuery = async (): Promise<void> => {
     try {
       setIsGeneratingQuery(true);
+      useTabs.getState().setIsTabExecuting(true);
       const payload = {
         containerSchema: QueryCopilotSampleContainerSchema,
         userPrompt: userInput,
@@ -101,6 +103,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       throw error;
     } finally {
       setIsGeneratingQuery(false);
+      useTabs.getState().setIsTabExecuting(false);
     }
   };
 
@@ -119,6 +122,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
   const queryDocumentsPerPage = async (firstItemIndex: number, queryIterator: MinimalQueryIterator): Promise<void> => {
     try {
       setIsExecuting(true);
+      useTabs.getState().setIsTabExecuting(true);
       const queryResults: QueryResults = await queryPagesUntilContentPresent(
         firstItemIndex,
         async (firstItemIndex: number) =>
@@ -133,6 +137,7 @@ export const QueryCopilotTab: React.FC<QueryCopilotTabProps> = ({
       handleError(errorMessage, "executeQueryCopilotTab");
     } finally {
       setIsExecuting(false);
+      useTabs.getState().setIsTabExecuting(false);
     }
   };
 

src/Explorer/Tabs/Tabs.tsx

@@ -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:

src/hooks/useTabs.ts

@@ -11,6 +11,7 @@ interface TabsState {
   activeReactTab: ReactTabKind | undefined;
   networkSettingsWarning: string;
   queryCopilotTabInitialInput: string;
+  isTabExecuting: boolean;
   activateTab: (tab: TabsBase) => void;
   activateNewTab: (tab: TabsBase) => void;
   activateReactTab: (tabkind: ReactTabKind) => void;
@@ -24,6 +25,7 @@ interface TabsState {
   closeReactTab: (tabKind: ReactTabKind) => void;
   setNetworkSettingsWarning: (warningMessage: string) => void;
   setQueryCopilotTabInitialInput: (input: string) => void;
+  setIsTabExecuting: (state: boolean) => void;
 }
 
 export enum ReactTabKind {
@@ -40,6 +42,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   activeReactTab: ReactTabKind.Home,
   networkSettingsWarning: "",
   queryCopilotTabInitialInput: "",
+  isTabExecuting: false,
   activateTab: (tab: TabsBase): void => {
     if (get().openedTabs.some((openedTab) => openedTab.tabId === tab.tabId)) {
       set({ activeTab: tab, activeReactTab: undefined });
@@ -151,4 +154,7 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
   },
   setNetworkSettingsWarning: (warningMessage: string) => set({ networkSettingsWarning: warningMessage }),
   setQueryCopilotTabInitialInput: (input: string) => set({ queryCopilotTabInitialInput: input }),
+  setIsTabExecuting: (state: boolean) => {
+    set({ isTabExecuting: state });
+  },
 }));