Fix loading spinner not appearing when running a script (#15936)

changes/15109-fix-scripts-spinner

@@ -0,0 +1 @@
+* Fix loading spinner not appearing when running a script on a host.

frontend/pages/hosts/details/cards/Scripts/Scripts.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { useQuery } from "react-query";
 import { AxiosResponse } from "axios";
 import { InjectedRouter } from "react-router";
@@ -43,6 +43,7 @@ const Scripts = ({
   router,
   onShowDetails,
 }: IScriptsProps) => {
+  const [isScriptRunning, setIsScriptRunning] = useState(false);
   const { renderFlash } = useContext(NotificationContext);
 
   const hostId = host?.id;
@@ -59,6 +60,9 @@ const Scripts = ({
       refetchOnWindowFocus: false,
       retry: false,
       enabled: Boolean(hostId),
+      onSuccess: () => {
+        setIsScriptRunning(false);
+      },
     }
   );
 
@@ -79,6 +83,7 @@ const Scripts = ({
         break;
       case "run":
         try {
+          setIsScriptRunning(true);
           await scriptsAPI.runScript({
             host_id: host.id,
             script_id: script.script_id,
@@ -87,6 +92,7 @@ const Scripts = ({
         } catch (e) {
           const error = e as AxiosResponse<IApiError>;
           renderFlash("error", error.data.errors[0].reason);
+          setIsScriptRunning(false);
         }
         break;
       default:
@@ -125,7 +131,7 @@ const Scripts = ({
           isAllPagesSelected={false}
           columnConfigs={scriptColumnConfigs}
           data={data}
-          isLoading={isLoadingScriptData}
+          isLoading={isScriptRunning}
           onQueryChange={onQueryChange}
           disableNextPage={hostScriptResponse?.meta.has_next_results}
           defaultPageIndex={page}

frontend/pages/hosts/details/cards/Scripts/_styles.scss

@@ -21,6 +21,10 @@
     }
   }
 
+    .data-table-block .data-table__wrapper {
+      box-sizing: border-box;
+    }
+
   .table-container__header-left {
     display: block;
   }