From 6ee5d87d486e450e18b7db994cb9d51f90c92a5a Mon Sep 17 00:00:00 2001
From: Luke Heath <luke@fleetdm.com>
Date: Tue, 12 Dec 2023 16:34:53 -0600
Subject: [PATCH] Add loading spinner to host details' scripts tab (#15607)

---
 changes/14998-add-loading-spinner-to-scripts           | 1 +
 frontend/pages/hosts/details/cards/Scripts/Scripts.tsx | 7 +++++--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 changes/14998-add-loading-spinner-to-scripts

diff --git a/changes/14998-add-loading-spinner-to-scripts b/changes/14998-add-loading-spinner-to-scripts
new file mode 100644
index 0000000000..a8f89ef430
--- /dev/null
+++ b/changes/14998-add-loading-spinner-to-scripts
@@ -0,0 +1 @@
+- Fixed loading indicator not appearing on host details' scripts tab.
diff --git a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
index 38505040c8..cbec6b214a 100644
--- a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
+++ b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
@@ -15,6 +15,7 @@ import Card from "components/Card";
 import TableContainer from "components/TableContainer";
 import EmptyTable from "components/EmptyTable";
 import DataError from "components/DataError";
+import Spinner from "components/Spinner";
 import { ITableQueryData } from "components/TableContainer/TableContainer";
 import { IHost } from "interfaces/host";
 import { IUser } from "interfaces/user";
@@ -102,12 +103,14 @@ const Scripts = ({
   return (
     <Card className={baseClass} borderRadiusSize="large" includeShadow>
       <h2>Scripts</h2>
-      {data && data.length === 0 ? (
+      {isLoadingScriptData && <Spinner />}
+      {!isLoadingScriptData && data && data.length === 0 && (
         <EmptyTable
           header="No scripts are available for this host"
           info="Expecting to see scripts? Try selecting “Refetch” to ask this host to report new vitals."
         />
-      ) : (
+      )}
+      {!isLoadingScriptData && data && data.length > 0 && (
         <TableContainer
           resultsTitle=""
           emptyComponent={() => <></>}