From 569bf15fa5825fe1610c1590ae07e9184d6071bd Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Wed, 28 Jun 2023 08:57:02 -0700
Subject: [PATCH] UI - remove extra loading Spinner from Software page (#12519)

## Addresses #11355, pt.1 (pt. 2 already fixed)

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

- [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/11355-software-page-rendering-bugs    |   1 +
 .../ManageSoftwarePage/ManageSoftwarePage.tsx | 110 ++++++++++--------
 2 files changed, 60 insertions(+), 51 deletions(-)
 create mode 100644 changes/11355-software-page-rendering-bugs

diff --git a/changes/11355-software-page-rendering-bugs b/changes/11355-software-page-rendering-bugs
new file mode 100644
index 0000000000..e0ee3a148c
--- /dev/null
+++ b/changes/11355-software-page-rendering-bugs
@@ -0,0 +1 @@
+- Fix a bug where an extraneous loading spinner was rendered on the Software page.
diff --git a/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx b/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx
index c1d92b739f..bcfcc681d8 100644
--- a/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx
+++ b/frontend/pages/software/ManageSoftwarePage/ManageSoftwarePage.tsx
@@ -613,12 +613,64 @@ const ManageSoftwarePage = ({
       searchQuery !== "" ||
       queryParams.vulnerable === "true");
 
-  return !isRouteOk ||
-    (isPremiumTier && !userTeams) ||
-    !globalConfig ||
-    (!softwareConfig && !softwareConfigError) ? (
-    <Spinner />
-  ) : (
+  const renderSoftwareTable = () => {
+    if (
+      isFetchingCount ||
+      isFetchingSoftware ||
+      !globalConfig ||
+      (!softwareConfig && !softwareConfigError)
+    ) {
+      return <Spinner />;
+    }
+    if (
+      (softwareError && !isFetchingSoftware) ||
+      (softwareConfigError && !isFetchingSoftwareConfig)
+    ) {
+      return <TableDataError />;
+    }
+    return (
+      <TableContainer
+        columns={softwareTableHeaders}
+        data={(isSoftwareEnabled && software?.software) || []}
+        isLoading={false}
+        resultsTitle={"software items"}
+        emptyComponent={() => (
+          <EmptySoftwareTable
+            isSoftwareDisabled={!isSoftwareEnabled}
+            isFilterVulnerable={filterVuln}
+            isSandboxMode={isSandboxMode}
+            isCollectingSoftware={isCollectingInventory}
+            isSearching={searchQuery !== ""}
+            noSandboxHosts={noSandboxHosts}
+          />
+        )}
+        defaultSortHeader={sortHeader || DEFAULT_SORT_HEADER}
+        defaultSortDirection={sortDirection || DEFAULT_SORT_DIRECTION}
+        defaultPageIndex={page || 0}
+        defaultSearchQuery={searchQuery}
+        manualSortBy
+        pageSize={DEFAULT_PAGE_SIZE}
+        showMarkAllPages={false}
+        isAllPagesSelected={false}
+        resetPageIndex={resetPageIndex}
+        disableNextPage={isLastPage}
+        searchable={searchable}
+        inputPlaceHolder="Search software by name or vulnerabilities (CVEs)"
+        onQueryChange={onQueryChange}
+        additionalQueries={filterVuln ? "vulnerable" : ""} // additionalQueries serves as a trigger
+        // for the useDeepEffect hook to fire onQueryChange for events happeing outside of
+        // the TableContainer
+        customControl={searchable ? renderVulnFilterDropdown : undefined}
+        stackControls
+        renderCount={renderSoftwareCount}
+        renderFooter={renderTableFooter}
+        disableMultiRowSelect
+        onSelectSingleRow={handleRowSelect}
+      />
+    );
+  };
+
+  return (
     <MainContent>
       <div className={`${baseClass}__wrapper`}>
         <div className={`${baseClass}__header-wrap`}>
@@ -655,51 +707,7 @@ const ManageSoftwarePage = ({
         <div className={`${baseClass}__description`}>
           {renderHeaderDescription()}
         </div>
-        <div className={`${baseClass}__table`}>
-          {(softwareError && !isFetchingSoftware) ||
-          (softwareConfigError && !isFetchingSoftwareConfig) ? (
-            <TableDataError />
-          ) : (
-            <TableContainer
-              columns={softwareTableHeaders}
-              data={(isSoftwareEnabled && software?.software) || []}
-              isLoading={isFetchingSoftware || isFetchingCount}
-              resultsTitle={"software items"}
-              emptyComponent={() => (
-                <EmptySoftwareTable
-                  isSoftwareDisabled={!isSoftwareEnabled}
-                  isFilterVulnerable={filterVuln}
-                  isSandboxMode={isSandboxMode}
-                  isCollectingSoftware={isCollectingInventory}
-                  isSearching={searchQuery !== ""}
-                  noSandboxHosts={noSandboxHosts}
-                />
-              )}
-              defaultSortHeader={sortHeader || DEFAULT_SORT_HEADER}
-              defaultSortDirection={sortDirection || DEFAULT_SORT_DIRECTION}
-              defaultPageIndex={page || 0}
-              defaultSearchQuery={searchQuery}
-              manualSortBy
-              pageSize={DEFAULT_PAGE_SIZE}
-              showMarkAllPages={false}
-              isAllPagesSelected={false}
-              resetPageIndex={resetPageIndex}
-              disableNextPage={isLastPage}
-              searchable={searchable}
-              inputPlaceHolder="Search software by name or vulnerabilities (CVEs)"
-              onQueryChange={onQueryChange}
-              additionalQueries={filterVuln ? "vulnerable" : ""} // additionalQueries serves as a trigger
-              // for the useDeepEffect hook to fire onQueryChange for events happeing outside of
-              // the TableContainer
-              customControl={searchable ? renderVulnFilterDropdown : undefined}
-              stackControls
-              renderCount={renderSoftwareCount}
-              renderFooter={renderTableFooter}
-              disableMultiRowSelect
-              onSelectSingleRow={handleRowSelect}
-            />
-          )}
-        </div>
+        <div className={`${baseClass}__table`}>{renderSoftwareTable()}</div>
         {showManageAutomationsModal && (
           <ManageAutomationsModal
             onCancel={toggleManageAutomationsModal}