Fix TableContainer empty state bug (#1406)

frontend/components/TableContainer/TableContainer.tsx

@@ -232,7 +232,7 @@ const TableContainer = ({
       </div>
       <div className={`${baseClass}__data-table-container`}>
         {/* No entities for this result. */}
-        {!isLoading && !data ? (
+        {!isLoading && data.length === 0 ? (
           <EmptyComponent />
         ) : (
           <>

frontend/pages/hosts/HostDetailsPage/EmptySoftware/_styles.scss

@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   margin-top: 80px;
+  margin-bottom: 80px;
 
   &__inner {
     display: flex;

frontend/pages/hosts/HostDetailsPage/HostDetailsPage.jsx

@@ -83,7 +83,7 @@ export class HostDetailsPage extends Component {
       showQueryHostModal: false,
       showTransferHostModal: false,
       showRefetchLoadingSpinner: false,
-      softwareState: props.host.software,
+      softwareState: [],
     };
   }
 
@@ -495,14 +495,10 @@ export class HostDetailsPage extends Component {
     // const { EmptySoftware } = this;
     const { onQueryChange } = this;
     const { softwareState } = this.state;
-    const { host } = this.props;
-    const wrapperClassName = `${baseClass}__table`;
+    const { host, isLoadingHost } = this.props;
 
     const tableHeaders = generateTableHeaders();
 
-    // Hardcoded in false for loading table data
-    const loadingTableData = false;
-
     return (
       <div className="section section--software">
         <p className="section__header">Software</p>
@@ -524,7 +520,7 @@ export class HostDetailsPage extends Component {
               <TableContainer
                 columns={tableHeaders}
                 data={generateDataSet(softwareState)}
-                isLoading={loadingTableData}
+                isLoading={isLoadingHost}
                 defaultSortHeader={"name"}
                 defaultSortDirection={"asc"}
                 inputPlaceHolder={"Filter software"}