From a85e47b28b992c6493a1a61ac52fecafb18e0b14 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 13 Jan 2022 12:12:54 -0500
Subject: [PATCH] Spiffier UI: Dashboard and Manage Host Page loading states
 (#3638)

---
 changes/issue-3051-update-loading-states      |   1 +
 .../TableContainer/TableContainer.tsx         |   8 +-
 .../HostSidePanel/HostSidePanel.tsx           |  18 +-
 .../side_panels/HostSidePanel/_styles.scss    |   4 +
 frontend/pages/Homepage/Homepage.tsx          |  94 +++++++---
 frontend/pages/Homepage/_styles.scss          |  15 ++
 .../cards/ActivityFeed/ActivityFeed.tsx       |  49 +++--
 .../Homepage/cards/ActivityFeed/_styles.scss  |  21 ++-
 .../cards/HostsStatus/HostsStatus.tsx         |  12 +-
 .../cards/HostsSummary/HostsSummary.tsx       |  22 ++-
 .../Homepage/cards/Software/Software.tsx      | 176 ++++++++++--------
 .../Homepage/cards/Software/_styles.scss      |   1 +
 .../Homepage/components/InfoCard/InfoCard.tsx |  21 ++-
 .../hosts/ManageHostsPage/ManageHostsPage.tsx |   7 +-
 14 files changed, 302 insertions(+), 147 deletions(-)
 create mode 100644 changes/issue-3051-update-loading-states

diff --git a/changes/issue-3051-update-loading-states b/changes/issue-3051-update-loading-states
new file mode 100644
index 0000000000..298f8b3d71
--- /dev/null
+++ b/changes/issue-3051-update-loading-states
@@ -0,0 +1 @@
+* Better loading states for dashboard and manage host page
\ No newline at end of file
diff --git a/frontend/components/TableContainer/TableContainer.tsx b/frontend/components/TableContainer/TableContainer.tsx
index e22f10324a..b9f9f25c23 100644
--- a/frontend/components/TableContainer/TableContainer.tsx
+++ b/frontend/components/TableContainer/TableContainer.tsx
@@ -205,6 +205,8 @@ const TableContainer = ({
     return data.length;
   }, [filteredCount, clientFilterCount, data]);
 
+  const opacity = isLoading ? { opacity: 0.4 } : { opacity: 1 };
+
   return (
     <div className={wrapperClasses}>
       {wideSearch && searchable && (
@@ -217,10 +219,12 @@ const TableContainer = ({
       )}
       <div className={`${baseClass}__header`}>
         {renderCount && (
-          <p className={`${baseClass}__results-count`}>{renderCount()}</p>
+          <p className={`${baseClass}__results-count`} style={opacity}>
+            {renderCount()}
+          </p>
         )}
         {!renderCount && data && displayCount() && !disableCount ? (
-          <p className={`${baseClass}__results-count`}>
+          <p className={`${baseClass}__results-count`} style={opacity}>
             {TableContainerUtils.generateResultsCountText(
               resultsTitle,
               displayCount()
diff --git a/frontend/components/side_panels/HostSidePanel/HostSidePanel.tsx b/frontend/components/side_panels/HostSidePanel/HostSidePanel.tsx
index 69bdb4e6a3..4d528be07b 100644
--- a/frontend/components/side_panels/HostSidePanel/HostSidePanel.tsx
+++ b/frontend/components/side_panels/HostSidePanel/HostSidePanel.tsx
@@ -1,6 +1,10 @@
 import React, { useState, useCallback } from "react";
 import { filter } from "lodash";
 
+import { ILabel } from "interfaces/label";
+import { PLATFORM_LABEL_DISPLAY_ORDER } from "utilities/constants";
+
+import Spinner from "components/Spinner";
 import Button from "components/buttons/Button";
 // @ts-ignore
 import InputField from "components/forms/fields/InputField";
@@ -8,21 +12,20 @@ import InputField from "components/forms/fields/InputField";
 import PanelGroup from "components/side_panels/HostSidePanel/PanelGroup";
 // @ts-ignore
 import SecondarySidePanelContainer from "components/side_panels/SecondarySidePanelContainer";
-import { ILabel } from "interfaces/label";
-import { PLATFORM_LABEL_DISPLAY_ORDER } from "utilities/constants";
 
 import PlusIcon from "../../../../assets/images/icon-plus-16x16@2x.png";
 
 const baseClass = "host-side-panel";
 
 interface IHostSidePanelProps {
-  labels: ILabel[];
+  labels?: ILabel[];
   onAddLabelClick: (evt: React.MouseEvent<HTMLButtonElement>) => void;
   onLabelClick: (
     selectedLabel: ILabel
   ) => (evt: React.MouseEvent<HTMLButtonElement>) => void;
   selectedFilter: string | undefined;
   canAddNewLabel: boolean;
+  isLabelsLoading: boolean;
 }
 
 const HostSidePanel = ({
@@ -31,6 +34,7 @@ const HostSidePanel = ({
   onLabelClick,
   selectedFilter,
   canAddNewLabel,
+  isLabelsLoading,
 }: IHostSidePanelProps): JSX.Element => {
   const [labelFilter, setLabelFilter] = useState<string>("");
 
@@ -41,6 +45,14 @@ const HostSidePanel = ({
     [setLabelFilter]
   );
 
+  if (isLabelsLoading || !labels) {
+    return (
+      <SecondarySidePanelContainer className={`${baseClass}`}>
+        <Spinner />
+      </SecondarySidePanelContainer>
+    );
+  }
+
   const allHostLabels = filter(labels, { type: "all" });
 
   const hostPlatformLabels = (() => {
diff --git a/frontend/components/side_panels/HostSidePanel/_styles.scss b/frontend/components/side_panels/HostSidePanel/_styles.scss
index 182a3275fb..dfbfa8362e 100644
--- a/frontend/components/side_panels/HostSidePanel/_styles.scss
+++ b/frontend/components/side_panels/HostSidePanel/_styles.scss
@@ -1,6 +1,10 @@
 .host-side-panel {
   color: $core-fleet-black;
 
+  .loading-spinner {
+    margin-top: 155px; // line up with host table loading spinner
+  }
+
   .input-icon-field {
     margin-top: 0;
 
diff --git a/frontend/pages/Homepage/Homepage.tsx b/frontend/pages/Homepage/Homepage.tsx
index 3dce4d2725..489bf89c3f 100644
--- a/frontend/pages/Homepage/Homepage.tsx
+++ b/frontend/pages/Homepage/Homepage.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import React, { useContext, useState, useCallback } from "react";
 import { useQuery } from "react-query";
 import paths from "router/paths";
 import { AppContext } from "context/app";
@@ -11,6 +11,7 @@ import { ITeam } from "interfaces/team";
 import sortUtils from "utilities/sort";
 
 import TeamsDropdown from "components/TeamsDropdown";
+import Spinner from "components/Spinner";
 import InfoCard from "./components/InfoCard";
 import HostsStatus from "./cards/HostsStatus";
 import HostsSummary from "./cards/HostsSummary";
@@ -52,6 +53,14 @@ const Homepage = (): JSX.Element => {
   const [onlineCount, setOnlineCount] = useState<string | undefined>();
   const [offlineCount, setOfflineCount] = useState<string | undefined>();
   const [newCount, setNewCount] = useState<string | undefined>();
+  const [showActivityFeedTitle, setShowActivityFeedTitle] = useState<boolean>(
+    false
+  );
+  const [showSoftwareUI, setShowSoftwareUI] = useState<boolean>(false);
+  const [showHostsUI, setShowHostsUI] = useState<boolean>(false); // Hides UI on first load only
+  const [isLoadingHostsSummary, setIsLoadingHostsSummary] = useState<boolean>(
+    true
+  ); // Opaque UI on subsequent loads
 
   const { data: teams } = useQuery<ITeamsResponse, Error, ITeam[]>(
     ["teams"],
@@ -76,6 +85,7 @@ const Homepage = (): JSX.Element => {
   useQuery<IHostSummary, Error, IHostSummary>(
     ["host summary", currentTeam],
     () => {
+      setIsLoadingHostsSummary(true);
       return hostSummaryAPI.getSummary(currentTeam?.id);
     },
     {
@@ -93,6 +103,8 @@ const Homepage = (): JSX.Element => {
           (platform: IHostSummaryPlatforms) => platform.platform === "windows"
         ) || { platform: "windows", hosts_count: 0 };
         setWindowsCount(windowsHosts.hosts_count.toLocaleString("en-US"));
+        setIsLoadingHostsSummary(false);
+        setShowHostsUI(true);
       },
     }
   );
@@ -124,33 +136,50 @@ const Homepage = (): JSX.Element => {
             </div>
           </div>
         </div>
-        <div className={`${baseClass}__section one-column`}>
-          <InfoCard
-            title="Hosts"
-            action={{
-              type: "link",
-              to:
-                MANAGE_HOSTS +
-                TAGGED_TEMPLATES.hostsByTeamRoute(currentTeam?.id),
-              text: "View all hosts",
-            }}
-            total_host_count={totalCount}
-          >
-            <HostsSummary
-              currentTeamId={currentTeam?.id}
-              macCount={macCount}
-              windowsCount={windowsCount}
-            />
-          </InfoCard>
-        </div>
-        <div className={`${baseClass}__section one-column`}>
-          <InfoCard title="">
-            <HostsStatus
-              onlineCount={onlineCount}
-              offlineCount={offlineCount}
-              newCount={newCount}
-            />
-          </InfoCard>
+        <div className="host-sections">
+          <>
+            {isLoadingHostsSummary && (
+              <div className="spinner">
+                <Spinner />
+              </div>
+            )}
+            <div className={`${baseClass}__section one-column`}>
+              <InfoCard
+                title="Hosts"
+                action={{
+                  type: "link",
+                  to:
+                    MANAGE_HOSTS +
+                    TAGGED_TEMPLATES.hostsByTeamRoute(currentTeam?.id),
+                  text: "View all hosts",
+                }}
+                total_host_count={
+                  !isLoadingHostsSummary ? totalCount : undefined
+                }
+                showTitle
+              >
+                <HostsSummary
+                  currentTeamId={currentTeam?.id}
+                  macCount={macCount}
+                  windowsCount={windowsCount}
+                  setIsLoadingHostsSummary={setIsLoadingHostsSummary}
+                  isLoadingHostsSummary={isLoadingHostsSummary}
+                  showHostsUI={showHostsUI}
+                />
+              </InfoCard>
+            </div>
+            <div className={`${baseClass}__section one-column`}>
+              <InfoCard title="">
+                <HostsStatus
+                  onlineCount={onlineCount}
+                  offlineCount={offlineCount}
+                  newCount={newCount}
+                  isLoadingHosts={isLoadingHostsSummary}
+                  showHostsUI={showHostsUI}
+                />
+              </InfoCard>
+            </div>
+          </>
         </div>
         {isPreviewMode && (
           <div className={`${baseClass}__section two-column`}>
@@ -175,16 +204,21 @@ const Homepage = (): JSX.Element => {
               text: "View all software",
               onClick: () => setIsSoftwareModalOpen(true),
             }}
+            showTitle={showSoftwareUI}
           >
             <Software
               currentTeamId={currentTeam?.id}
               isModalOpen={isSoftwareModalOpen}
               setIsSoftwareModalOpen={setIsSoftwareModalOpen}
+              setShowSoftwareUI={setShowSoftwareUI}
+              showSoftwareUI={showSoftwareUI}
             />
           </InfoCard>
           {!isPreviewMode && !currentTeam && isOnGlobalTeam && (
-            <InfoCard title="Activity">
-              <ActivityFeed />
+            <InfoCard title="Activity" showTitle={showActivityFeedTitle}>
+              <ActivityFeed
+                setShowActivityFeedTitle={setShowActivityFeedTitle}
+              />
             </InfoCard>
           )}
         </div>
diff --git a/frontend/pages/Homepage/_styles.scss b/frontend/pages/Homepage/_styles.scss
index 1ba4ff0859..fa3ebeeddc 100644
--- a/frontend/pages/Homepage/_styles.scss
+++ b/frontend/pages/Homepage/_styles.scss
@@ -67,4 +67,19 @@
       }
     }
   }
+
+  .host-sections {
+    position: relative;
+  }
+
+  .spinner {
+    z-index: 11;
+    opacity: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
diff --git a/frontend/pages/Homepage/cards/ActivityFeed/ActivityFeed.tsx b/frontend/pages/Homepage/cards/ActivityFeed/ActivityFeed.tsx
index a302f4dd11..81734c1e17 100644
--- a/frontend/pages/Homepage/cards/ActivityFeed/ActivityFeed.tsx
+++ b/frontend/pages/Homepage/cards/ActivityFeed/ActivityFeed.tsx
@@ -19,6 +19,10 @@ import OpenNewTabIcon from "../../../../../assets/images/open-new-tab-12x12@2x.p
 
 const baseClass = "activity-feed";
 
+interface IActvityCardProps {
+  setShowActivityFeedTitle: (showActivityFeedTitle: boolean) => void;
+}
+
 const DEFAULT_GRAVATAR_URL =
   "https://www.gravatar.com/avatar/00000000000000000000000000000000?d=blank&size=200";
 
@@ -55,12 +59,16 @@ const TAGGED_TEMPLATES = {
   },
 };
 
-const ActivityFeed = (): JSX.Element => {
-  const [activities, setActivities] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [isLoadingError, setIsLoadingError] = useState(false);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [showMore, setShowMore] = useState(true);
+const ActivityFeed = ({
+  setShowActivityFeedTitle,
+}: IActvityCardProps): JSX.Element => {
+  const [activities, setActivities] = useState<IActivity[] | []>([]);
+  const [isLoadingError, setIsLoadingError] = useState<boolean>(false);
+  const [pageIndex, setPageIndex] = useState<number>(0);
+  const [showMore, setShowMore] = useState<boolean>(true);
+  const [isLoadingActivityFeed, setIsLoadingActivityFeed] = useState<boolean>(
+    true
+  );
 
   useEffect((): void => {
     const getActivities = async (): Promise<void> => {
@@ -74,11 +82,11 @@ const ActivityFeed = (): JSX.Element => {
         } else {
           setShowMore(false);
         }
-
-        setIsLoading(false);
+        setShowActivityFeedTitle(true);
+        setIsLoadingActivityFeed(false);
       } catch (err) {
         setIsLoadingError(true);
-        setIsLoading(false);
+        setIsLoadingActivityFeed(false);
       }
     };
 
@@ -86,13 +94,13 @@ const ActivityFeed = (): JSX.Element => {
   }, [pageIndex]);
 
   const onLoadPrevious = () => {
-    setIsLoading(true);
+    setIsLoadingActivityFeed(true);
     setShowMore(true);
     setPageIndex(pageIndex - 1);
   };
 
   const onLoadNext = () => {
-    setIsLoading(true);
+    setIsLoadingActivityFeed(true);
     setPageIndex(pageIndex + 1);
   };
 
@@ -179,19 +187,28 @@ const ActivityFeed = (): JSX.Element => {
     renderActivityBlock(activity, i)
   );
 
+  // Renders opaque information as activity feed is loading
+  const opacity = isLoadingActivityFeed ? { opacity: 0.4 } : { opacity: 1 };
+
   return (
     <div className={baseClass}>
       {isLoadingError && renderError()}
-      {!isLoadingError && !isLoading && isEmpty(activities) ? (
+      {!isLoadingError && !isLoadingActivityFeed && isEmpty(activities) ? (
         renderNoActivities()
       ) : (
-        <div>{renderActivities}</div>
+        <>
+          {isLoadingActivityFeed && (
+            <div className="spinner">
+              <Spinner />
+            </div>
+          )}
+          <div style={opacity}>{renderActivities}</div>
+        </>
       )}
-      {isLoading && <Spinner />}
       {!isLoadingError && !isEmpty(activities) && (
         <div className={`${baseClass}__pagination`}>
           <Button
-            disabled={isLoading || pageIndex === 0}
+            disabled={isLoadingActivityFeed || pageIndex === 0}
             onClick={onLoadPrevious}
             variant="unstyled"
             className={`${baseClass}__load-activities-button`}
@@ -201,7 +218,7 @@ const ActivityFeed = (): JSX.Element => {
             </>
           </Button>
           <Button
-            disabled={isLoading || !showMore}
+            disabled={isLoadingActivityFeed || !showMore}
             onClick={onLoadNext}
             variant="unstyled"
             className={`${baseClass}__load-activities-button`}
diff --git a/frontend/pages/Homepage/cards/ActivityFeed/_styles.scss b/frontend/pages/Homepage/cards/ActivityFeed/_styles.scss
index 3ea3209d06..36c6637c31 100644
--- a/frontend/pages/Homepage/cards/ActivityFeed/_styles.scss
+++ b/frontend/pages/Homepage/cards/ActivityFeed/_styles.scss
@@ -2,6 +2,8 @@
   margin-top: $pad-large;
   display: flex;
   flex-direction: column;
+  position: relative;
+  min-height: 400px;
 
   &__header-wrap {
     .form-field {
@@ -58,12 +60,15 @@
   }
 
   &__pagination {
-    display: flex;
-    justify-content: flex-end;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
   }
 
   &__load-activities-button {
     color: $core-vibrant-blue;
+    height: 20px;
+    vertical-align: bottom;
 
     .fleeticon-chevronleft,
     .fleeticon-chevronright {
@@ -147,4 +152,16 @@
       }
     }
   }
+
+  .spinner {
+    z-index: 11;
+    opacity: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 40px; // Aligns with software table spinner
+  }
 }
diff --git a/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx b/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx
index 3a1d0e57b7..f933c1c2fa 100644
--- a/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx
+++ b/frontend/pages/Homepage/cards/HostsStatus/HostsStatus.tsx
@@ -6,15 +6,25 @@ interface IHostSummaryProps {
   onlineCount: string | undefined;
   offlineCount: string | undefined;
   newCount: string | undefined;
+  isLoadingHosts: boolean;
+  showHostsUI: boolean;
 }
 
 const HostsStatus = ({
   onlineCount,
   offlineCount,
   newCount,
+  isLoadingHosts,
+  showHostsUI,
 }: IHostSummaryProps): JSX.Element => {
+  // Renders opaque information as host information is loading
+  let opacity = { opacity: 0 };
+  if (showHostsUI) {
+    opacity = isLoadingHosts ? { opacity: 0.4 } : { opacity: 1 };
+  }
+
   return (
-    <div className={baseClass}>
+    <div className={baseClass} style={opacity}>
       <div className={`${baseClass}__tile online-tile`}>
         <div>
           <div
diff --git a/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx b/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
index 45c45ee85b..50d1dba167 100644
--- a/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
+++ b/frontend/pages/Homepage/cards/HostsSummary/HostsSummary.tsx
@@ -15,6 +15,9 @@ interface IHostSummaryProps {
   currentTeamId: number | undefined;
   macCount: string | undefined;
   windowsCount: string | undefined;
+  setIsLoadingHostsSummary: (isLoadingHostSummary: boolean) => void;
+  isLoadingHostsSummary: boolean;
+  showHostsUI: boolean;
 }
 
 interface ILabelsResponse {
@@ -29,6 +32,9 @@ const HostsSummary = ({
   currentTeamId,
   macCount,
   windowsCount,
+  setIsLoadingHostsSummary,
+  isLoadingHostsSummary,
+  showHostsUI,
 }: IHostSummaryProps): JSX.Element => {
   const [linuxCount, setLinuxCount] = useState<string | undefined>();
 
@@ -39,9 +45,15 @@ const HostsSummary = ({
   };
   const { data: labels } = useQuery<ILabelsResponse, Error, ILabel[]>(
     ["labels"],
-    () => labelsAPI.loadAll(),
+    () => {
+      setIsLoadingHostsSummary(true);
+      return labelsAPI.loadAll();
+    },
     {
       select: (data: ILabelsResponse) => data.labels,
+      onSuccess: () => {
+        setIsLoadingHostsSummary(false);
+      },
     }
   );
 
@@ -63,8 +75,14 @@ const HostsSummary = ({
     }
   );
 
+  // Renders opaque information as host information is loading
+  let opacity = { opacity: 0 };
+  if (showHostsUI) {
+    opacity = isLoadingHostsSummary ? { opacity: 0.4 } : { opacity: 1 };
+  }
+
   return (
-    <div className={baseClass}>
+    <div className={baseClass} style={opacity}>
       <div className={`${baseClass}__tile mac-tile`}>
         <div className={`${baseClass}__tile-icon`}>
           <img src={MacIcon} alt="mac icon" id="mac-icon" />
diff --git a/frontend/pages/Homepage/cards/Software/Software.tsx b/frontend/pages/Homepage/cards/Software/Software.tsx
index 4ee098b1c9..17df940c0e 100644
--- a/frontend/pages/Homepage/cards/Software/Software.tsx
+++ b/frontend/pages/Homepage/cards/Software/Software.tsx
@@ -12,6 +12,7 @@ import Modal from "components/Modal";
 import TabsWrapper from "components/TabsWrapper";
 import TableContainer from "components/TableContainer"; // @ts-ignore
 import Dropdown from "components/forms/fields/Dropdown";
+import Spinner from "components/Spinner";
 
 import {
   generateTableHeaders,
@@ -30,6 +31,8 @@ interface ISoftwareCardProps {
   currentTeamId?: number;
   isModalOpen: boolean;
   setIsSoftwareModalOpen: (isOpen: boolean) => void;
+  setShowSoftwareUI: (showSoftwareTitle: boolean) => void;
+  showSoftwareUI: boolean;
 }
 
 const VULNERABLE_OPTIONS = [
@@ -106,6 +109,8 @@ const Software = ({
   currentTeamId,
   isModalOpen,
   setIsSoftwareModalOpen,
+  setShowSoftwareUI,
+  showSoftwareUI,
 }: ISoftwareCardProps): JSX.Element => {
   const [softwarePageIndex, setSoftwarePageIndex] = useState<number>(0);
   const [vSoftwarePageIndex, setVSoftwarePageIndex] = useState<number>(0);
@@ -121,7 +126,6 @@ const Software = ({
     setIsModalSoftwareVulnerable,
   ] = useState<boolean>(false);
   const [navTabIndex, setNavTabIndex] = useState<number>(0);
-  const [isLoadingSoftware, setIsLoadingSoftware] = useState<boolean>(true);
   const [
     isLoadingVulnerableSoftware,
     setIsLoadingVulnerableSoftware,
@@ -133,6 +137,7 @@ const Software = ({
     isLoadingModalSoftwareCount,
     setIsLoadingModalSoftwareCount,
   ] = useState<boolean>(true);
+  const [isLoadingSoftware, setIsLoadingSoftware] = useState<boolean>(true);
 
   const { data: software } = useQuery<ISoftware[], Error>(
     ["software", softwarePageIndex, currentTeamId],
@@ -153,6 +158,7 @@ const Software = ({
       // So we manage our own load states
       keepPreviousData: true,
       onSuccess: () => {
+        setShowSoftwareUI(true);
         setIsLoadingSoftware(false);
       },
       // TODO: error UX?
@@ -312,88 +318,98 @@ const Software = ({
 
   const tableHeaders = generateTableHeaders();
 
+  // Renders opaque information as host information is loading
+  const opacity = showSoftwareUI ? { opacity: 1 } : { opacity: 0 };
+
   return (
     <div className={baseClass}>
-      <TabsWrapper>
-        <Tabs selectedIndex={navTabIndex} onSelect={(i) => setNavTabIndex(i)}>
-          <TabList>
-            <Tab>All</Tab>
-            <Tab>Vulnerable</Tab>
-          </TabList>
-          <TabPanel>
-            <TableContainer
-              columns={tableHeaders}
-              data={software || []}
-              isLoading={isLoadingSoftware}
-              defaultSortHeader={"name"}
-              defaultSortDirection={"asc"}
-              hideActionButton
-              resultsTitle={"software"}
-              emptyComponent={EmptySoftware}
-              showMarkAllPages={false}
-              isAllPagesSelected={false}
-              disableCount
-              disableActionButton
-              pageSize={PAGE_SIZE}
-              onQueryChange={onAllSoftwareQueryChange}
-            />
-          </TabPanel>
-          <TabPanel>
-            <TableContainer
-              columns={tableHeaders}
-              data={vulnerableSoftware || []}
-              isLoading={isLoadingVulnerableSoftware}
-              defaultSortHeader={"name"}
-              defaultSortDirection={"asc"}
-              hideActionButton
-              resultsTitle={"software"}
-              emptyComponent={() => EmptySoftware("vulnerable")}
-              showMarkAllPages={false}
-              isAllPagesSelected={false}
-              disableCount
-              disableActionButton
-              pageSize={PAGE_SIZE}
-              onQueryChange={onVulnerableSoftwareQueryChange}
-            />
-          </TabPanel>
-        </Tabs>
-      </TabsWrapper>
-      {isModalOpen && (
-        <Modal
-          title="Software"
-          onExit={() => setIsSoftwareModalOpen(false)}
-          className={`${baseClass}__software-modal`}
-        >
-          <>
-            <p>
-              Search for a specific software version to find the hosts that have
-              it installed.
-            </p>
-            <TableContainer
-              columns={generateModalSoftwareTableHeaders()}
-              data={modalSoftware || []}
-              isLoading={isLoadingModalSoftware}
-              defaultSortHeader={"name"}
-              defaultSortDirection={"asc"}
-              hideActionButton
-              resultsTitle={"software items"}
-              emptyComponent={() =>
-                EmptySoftware(
-                  modalSoftwareSearchText === "" ? "modal" : "search"
-                )
-              }
-              showMarkAllPages={false}
-              isAllPagesSelected={false}
-              searchable
-              disableActionButton
-              pageSize={MODAL_PAGE_SIZE}
-              onQueryChange={onModalSoftwareQueryChange}
-              customControl={renderStatusDropdown}
-              renderCount={renderModalSoftwareCount}
-            />
-          </>
-        </Modal>
+      {!showSoftwareUI && (
+        <div className="spinner">
+          <Spinner />
+        </div>
       )}
+      <div style={opacity}>
+        <TabsWrapper>
+          <Tabs selectedIndex={navTabIndex} onSelect={(i) => setNavTabIndex(i)}>
+            <TabList>
+              <Tab>All</Tab>
+              <Tab>Vulnerable</Tab>
+            </TabList>
+            <TabPanel>
+              <TableContainer
+                columns={tableHeaders}
+                data={software || []}
+                isLoading={isLoadingSoftware}
+                defaultSortHeader={"name"}
+                defaultSortDirection={"asc"}
+                hideActionButton
+                resultsTitle={"software"}
+                emptyComponent={EmptySoftware}
+                showMarkAllPages={false}
+                isAllPagesSelected={false}
+                disableCount
+                disableActionButton
+                pageSize={PAGE_SIZE}
+                onQueryChange={onAllSoftwareQueryChange}
+              />
+            </TabPanel>
+            <TabPanel>
+              <TableContainer
+                columns={tableHeaders}
+                data={vulnerableSoftware || []}
+                isLoading={isLoadingVulnerableSoftware}
+                defaultSortHeader={"name"}
+                defaultSortDirection={"asc"}
+                hideActionButton
+                resultsTitle={"software"}
+                emptyComponent={() => EmptySoftware("vulnerable")}
+                showMarkAllPages={false}
+                isAllPagesSelected={false}
+                disableCount
+                disableActionButton
+                pageSize={PAGE_SIZE}
+                onQueryChange={onVulnerableSoftwareQueryChange}
+              />
+            </TabPanel>
+          </Tabs>
+        </TabsWrapper>
+        {isModalOpen && (
+          <Modal
+            title="Software"
+            onExit={() => setIsSoftwareModalOpen(false)}
+            className={`${baseClass}__software-modal`}
+          >
+            <>
+              <p>
+                Search for a specific software version to find the hosts that
+                have it installed.
+              </p>
+              <TableContainer
+                columns={generateModalSoftwareTableHeaders()}
+                data={modalSoftware || []}
+                isLoading={isLoadingModalSoftware}
+                defaultSortHeader={"name"}
+                defaultSortDirection={"asc"}
+                hideActionButton
+                resultsTitle={"software items"}
+                emptyComponent={() =>
+                  EmptySoftware(
+                    modalSoftwareSearchText === "" ? "modal" : "search"
+                  )
+                }
+                showMarkAllPages={false}
+                isAllPagesSelected={false}
+                searchable
+                disableActionButton
+                pageSize={MODAL_PAGE_SIZE}
+                onQueryChange={onModalSoftwareQueryChange}
+                customControl={renderStatusDropdown}
+                renderCount={renderModalSoftwareCount}
+              />
+            </>
+          </Modal>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/frontend/pages/Homepage/cards/Software/_styles.scss b/frontend/pages/Homepage/cards/Software/_styles.scss
index 7d60ded2ca..153e471216 100644
--- a/frontend/pages/Homepage/cards/Software/_styles.scss
+++ b/frontend/pages/Homepage/cards/Software/_styles.scss
@@ -1,5 +1,6 @@
 .home-software {
   margin-top: $pad-large;
+  position: relative;
 
   .software-link {
     img {
diff --git a/frontend/pages/Homepage/components/InfoCard/InfoCard.tsx b/frontend/pages/Homepage/components/InfoCard/InfoCard.tsx
index 68091f9303..5e2ae71897 100644
--- a/frontend/pages/Homepage/components/InfoCard/InfoCard.tsx
+++ b/frontend/pages/Homepage/components/InfoCard/InfoCard.tsx
@@ -19,6 +19,9 @@ interface IInfoCardProps {
         onClick?: () => void;
       };
   total_host_count?: string;
+  isLoadingSoftware?: boolean;
+  isLoadingActivityFeed?: boolean;
+  showTitle?: boolean;
 }
 
 const baseClass = "homepage-info-card";
@@ -28,6 +31,9 @@ const InfoCard = ({
   children,
   action,
   total_host_count,
+  isLoadingSoftware,
+  isLoadingActivityFeed,
+  showTitle,
 }: IInfoCardProps) => {
   const renderAction = () => {
     if (action) {
@@ -57,15 +63,18 @@ const InfoCard = ({
     return null;
   };
 
+  const ok = false;
   return (
     <div className={baseClass}>
-      <div className={`${baseClass}__section-title-cta`}>
-        <div className={`${baseClass}__section-title`}>
-          <h2>{title}</h2>
-          {total_host_count && <span>{total_host_count}</span>}
+      {showTitle && (
+        <div className={`${baseClass}__section-title-cta`}>
+          <div className={`${baseClass}__section-title`}>
+            <h2>{title}</h2>
+            {total_host_count && <span>{total_host_count}</span>}
+          </div>
+          {renderAction()}
         </div>
-        {renderAction()}
-      </div>
+      )}
       {children}
     </div>
   );
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 89a383e20f..8892525d3c 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -1387,10 +1387,6 @@ const ManageHostsPage = ({
   };
 
   const renderSidePanel = () => {
-    if (!labels) {
-      return null;
-    }
-
     let SidePanel;
 
     if (isAddLabel) {
@@ -1410,6 +1406,7 @@ const ManageHostsPage = ({
           onLabelClick={onLabelClick}
           selectedFilter={getLabelSelected() || getStatusSelected()}
           canAddNewLabel={canAddNewLabels as boolean}
+          isLabelsLoading={isLabelsLoading}
         />
       );
     }
@@ -1595,7 +1592,7 @@ const ManageHostsPage = ({
           {config && (!isPremiumTier || teams) ? renderTable() : <Spinner />}
         </div>
       )}
-      {!isLabelsLoading && renderSidePanel()}
+      {renderSidePanel()}
       {renderDeleteSecretModal()}
       {renderSecretEditorModal()}
       {renderEnrollSecretModal()}