From c1f961ec30e0429dd4d5b43ad16db69366a5bbd9 Mon Sep 17 00:00:00 2001
From: Luke Heath <luke@fleetdm.com>
Date: Fri, 5 Jan 2024 12:48:07 -0600
Subject: [PATCH] Fix loading spinner not appearing when running a script
 (#15936)

---
 changes/15109-fix-scripts-spinner                      |  1 +
 frontend/pages/hosts/details/cards/Scripts/Scripts.tsx | 10 ++++++++--
 .../pages/hosts/details/cards/Scripts/_styles.scss     |  4 ++++
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 changes/15109-fix-scripts-spinner

diff --git a/changes/15109-fix-scripts-spinner b/changes/15109-fix-scripts-spinner
new file mode 100644
index 0000000000..13ab309fd0
--- /dev/null
+++ b/changes/15109-fix-scripts-spinner
@@ -0,0 +1 @@
+* Fix loading spinner not appearing when running a script on a host.
diff --git a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
index b7ae81f055..717f1fb107 100644
--- a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
+++ b/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}
diff --git a/frontend/pages/hosts/details/cards/Scripts/_styles.scss b/frontend/pages/hosts/details/cards/Scripts/_styles.scss
index 0bdc86c03c..90784836ae 100644
--- a/frontend/pages/hosts/details/cards/Scripts/_styles.scss
+++ b/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;
   }