From 999207bd33f4cc037c39db5f2d2d12fe0ab12cc7 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 16 Jun 2025 11:23:19 -0400
Subject: [PATCH] Fleet UI: Improved error and loading state for self-service
 page (#30042)

---
 .../29822-self-service-loading-error-state    |  1 +
 .../Software/SelfService/SelfService.tsx      | 83 +++++++------------
 2 files changed, 33 insertions(+), 51 deletions(-)
 create mode 100644 changes/29822-self-service-loading-error-state

diff --git a/changes/29822-self-service-loading-error-state b/changes/29822-self-service-loading-error-state
new file mode 100644
index 0000000000..9fcc6a7b0b
--- /dev/null
+++ b/changes/29822-self-service-loading-error-state
@@ -0,0 +1 @@
+- Fleet UI: Improved error and loading state for self-service page
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx
index 6b3c93b006..88869cf0f7 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx
@@ -357,51 +357,15 @@ const SoftwareSelfService = ({
       return <DeviceUserError />; // Only shown on DeviceUserPage not HostDetailsPage
     }
 
-    if (isEmpty || !selfServiceData) {
+    // No self-service software available hides categories menu and header filters
+    if ((isEmpty || !selfServiceData) && !isFetching) {
       return (
         <>
-          {renderHeaderFilters()}
-          <div className={`${baseClass}__table`}>
-            {renderCategoriesMenu()}
-            <EmptyTable
-              graphicName="empty-software"
-              header="No self-service software available yet"
-              info="Your organization didn't add any self-service software. If you need any, reach out to your IT department."
-            />
-          </div>
-        </>
-      );
-    }
-
-    if (isFetching) {
-      return (
-        <>
-          {renderHeaderFilters()}
-          <div className={`${baseClass}__table`}>
-            {renderCategoriesMenu()}
-            <Spinner />
-          </div>
-        </>
-      );
-    }
-
-    if (isEmptySearch) {
-      return (
-        <>
-          {renderHeaderFilters()}
-          <div className={`${baseClass}__table`}>
-            {renderCategoriesMenu()}
-            <EmptyTable
-              graphicName="empty-search-question"
-              header="No items match the current search criteria"
-              info={
-                <>
-                  Not finding what you&apos;re looking for?{" "}
-                  <CustomLink url={contactUrl} text="reach out to IT" newTab />
-                </>
-              }
-            />
-          </div>
+          <EmptyTable
+            graphicName="empty-software"
+            header="No self-service software available yet"
+            info="Your organization didn't add any self-service software. If you need any, reach out to your IT department."
+          />
         </>
       );
     }
@@ -417,7 +381,7 @@ const SoftwareSelfService = ({
               selfServiceData?.software || [],
               queryParams.category_id
             )}
-            isLoading={isLoading}
+            isLoading={isFetching}
             defaultSortHeader={DEFAULT_SELF_SERVICE_QUERY_PARAMS.order_key}
             defaultSortDirection={
               DEFAULT_SELF_SERVICE_QUERY_PARAMS.order_direction
@@ -425,9 +389,26 @@ const SoftwareSelfService = ({
             pageIndex={0}
             disableNextPage={selfServiceData?.meta.has_next_results === false}
             pageSize={DEFAULT_SELF_SERVICE_QUERY_PARAMS.per_page}
-            emptyComponent={() => (
-              <EmptySoftwareTable noSearchQuery={isEmptySearch} />
-            )}
+            emptyComponent={() => {
+              return isEmptySearch ? (
+                <EmptyTable
+                  graphicName="empty-search-question"
+                  header="No items match the current search criteria"
+                  info={
+                    <>
+                      Not finding what you&apos;re looking for?{" "}
+                      <CustomLink
+                        url={contactUrl}
+                        text="Reach out to IT"
+                        newTab
+                      />
+                    </>
+                  }
+                />
+              ) : (
+                <EmptySoftwareTable />
+              );
+            }}
             showMarkAllPages={false}
             isAllPagesSelected={false}
             searchable={false}
@@ -437,11 +418,11 @@ const SoftwareSelfService = ({
         </div>
 
         <Pagination
-          disableNext={selfServiceData.meta.has_next_results === false}
-          disablePrev={selfServiceData.meta.has_previous_results === false}
+          disableNext={selfServiceData?.meta.has_next_results === false}
+          disablePrev={selfServiceData?.meta.has_previous_results === false}
           hidePagination={
-            selfServiceData.meta.has_next_results === false &&
-            selfServiceData.meta.has_previous_results === false
+            selfServiceData?.meta.has_next_results === false &&
+            selfServiceData?.meta.has_previous_results === false
           }
           onNextPage={onNextPage}
           onPrevPage={onPrevPage}