From 4410aafc8204aaae83767a0bf6bfdb8f339bae4c Mon Sep 17 00:00:00 2001
From: Andrew Azores <aazores@redhat.com>
Date: Tue, 16 Apr 2024 23:39:13 -0400
Subject: [PATCH] loading state

---
 src/app/SecurityPanel/ImportCertificate.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/app/SecurityPanel/ImportCertificate.tsx b/src/app/SecurityPanel/ImportCertificate.tsx
index ae555b5bc..bb7509eda 100644
--- a/src/app/SecurityPanel/ImportCertificate.tsx
+++ b/src/app/SecurityPanel/ImportCertificate.tsx
@@ -29,6 +29,7 @@ import {
   PanelMain,
   PanelMainBody,
   Popover,
+  Spinner,
   Text,
   TextContent,
   TextVariants,
@@ -37,21 +38,31 @@ import {
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import * as React from 'react';
 import { SecurityCard } from './types';
+import { tap } from 'rxjs/operators';
 
 export const CertificateImport: React.FC = () => {
   const context = React.useContext(ServiceContext);
   const addSubscription = useSubscriptions();
+  const [loading, setLoading] = React.useState(true);
   const [certs, setCerts] = React.useState([] as string[]);
 
   React.useEffect(() => {
-    addSubscription(context.api.doGet('tls/certs', 'v3').subscribe(setCerts));
-  }, [addSubscription, context.api, setCerts]);
+    setLoading(true);
+    addSubscription(
+      context.api
+        .doGet('tls/certs', 'v3')
+        .pipe(tap((_) => setLoading(false)))
+        .subscribe(setCerts),
+    );
+  }, [setLoading, addSubscription, context.api, setCerts]);
 
   return (
     <Panel isScrollable>
       <PanelMain>
         <PanelMainBody>
-          {certs.length ? (
+          {loading ? (
+            <Spinner />
+          ) : certs.length ? (
             <List isPlain isBordered>
               {certs.map((cert) => (
                 <ListItem key={cert}>