From e5806b8feaf49338dee1e3b9ff5470888fb14366 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Tue, 2 Jul 2024 09:32:35 -0700
Subject: [PATCH] UI: Improve styling of loading spinner in targets input
 (#20144)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Addresses #20143
<img width="1119" alt="Screenshot 2024-07-01 at 5 27 35 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/9ac2313a-e7bf-403b-acd0-05680d84cdec">


- [x] Changes file added for user-visible changes in `changes/`,
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/20143-targets-input-spinner           |  1 +
 .../LiveQuery/TargetsInput/TargetsInput.tsx   | 54 ++++++++++---------
 .../LiveQuery/TargetsInput/_styles.scss       |  2 +-
 3 files changed, 31 insertions(+), 26 deletions(-)
 create mode 100644 changes/20143-targets-input-spinner

diff --git a/changes/20143-targets-input-spinner b/changes/20143-targets-input-spinner
new file mode 100644
index 0000000000..da5e679348
--- /dev/null
+++ b/changes/20143-targets-input-spinner
@@ -0,0 +1 @@
+- Fix styling issues with the target inputs loading spinner on the run live query/policy page.
diff --git a/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx b/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx
index e18200309c..dcfc2074d8 100644
--- a/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx
+++ b/frontend/components/LiveQuery/TargetsInput/TargetsInput.tsx
@@ -9,6 +9,7 @@ import DataError from "components/DataError";
 // @ts-ignore
 import InputFieldWithIcon from "components/forms/fields/InputFieldWithIcon/InputFieldWithIcon";
 import TableContainer from "components/TableContainer";
+import Spinner from "components/Spinner";
 import { ITargestInputHostTableConfig } from "./TargetsInputHostsTableConfig";
 
 interface ITargetsInputProps {
@@ -70,32 +71,35 @@ const TargetsInput = ({
           placeholder={placeholder}
           onChange={setSearchText}
         />
-        {isActiveSearch && (
-          <div className={`${baseClass}__hosts-search-dropdown`}>
-            <TableContainer<Row<IHost>>
-              columnConfigs={searchResultsTableConfig}
-              data={dropdownHosts}
-              isLoading={isTargetsLoading}
-              emptyComponent={() => (
-                <div className="empty-search">
-                  <div className="empty-search__inner">
-                    <h4>No hosts match the current search criteria.</h4>
-                    <p>
-                      Expecting to see hosts? Try again in a few seconds as the
-                      system catches up.
-                    </p>
+        {isActiveSearch &&
+          (isTargetsLoading ? (
+            <Spinner />
+          ) : (
+            <div className={`${baseClass}__hosts-search-dropdown`}>
+              <TableContainer<Row<IHost>>
+                columnConfigs={searchResultsTableConfig}
+                data={dropdownHosts}
+                isLoading={false}
+                emptyComponent={() => (
+                  <div className="empty-search">
+                    <div className="empty-search__inner">
+                      <h4>No hosts match the current search criteria.</h4>
+                      <p>
+                        Expecting to see hosts? Try again in a few seconds as
+                        the system catches up.
+                      </p>
+                    </div>
                   </div>
-                </div>
-              )}
-              showMarkAllPages={false}
-              isAllPagesSelected={false}
-              disableCount
-              disablePagination
-              disableMultiRowSelect
-              onClickRow={handleRowSelect}
-            />
-          </div>
-        )}
+                )}
+                showMarkAllPages={false}
+                isAllPagesSelected={false}
+                disableCount
+                disablePagination
+                disableMultiRowSelect
+                onClickRow={handleRowSelect}
+              />
+            </div>
+          ))}
         {isSearchError && (
           <div className={`${baseClass}__hosts-search-dropdown`}>
             <DataError />
diff --git a/frontend/components/LiveQuery/TargetsInput/_styles.scss b/frontend/components/LiveQuery/TargetsInput/_styles.scss
index 55b1f0339d..e219d2660d 100644
--- a/frontend/components/LiveQuery/TargetsInput/_styles.scss
+++ b/frontend/components/LiveQuery/TargetsInput/_styles.scss
@@ -102,6 +102,6 @@
   // override the default styles for the spinner.
   // TODO: set better default styles for the spinner
   .loading-spinner.centered {
-    margin: auto;
+    margin: 1rem auto;
   }
 }