Simpler list loading state management

elastic · Jan 31, 2023 · d4e5dc3 · d4e5dc3
1 parent 24b6386
commit d4e5dc3
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 22 deletions.
diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_delete_confirmation_modal.tsx
@@ -15,7 +15,7 @@ import { useDeleteSlo } from '../../../hooks/slo/use_delete_slo';
 export interface SloDeleteConfirmationModalProps {
   slo: SLOWithSummaryResponse;
   onCancel: () => void;
-  onDeleting: (isDeleting: boolean) => void;
+  onDeleting: () => void;
   onDeleted: () => void;
 }
 
@@ -34,18 +34,16 @@ export function SloDeleteConfirmationModal({
   const { deleteSlo, success, loading, error } = useDeleteSlo();
 
   if (loading) {
-    onDeleting(true);
+    onDeleting();
   }
 
   if (success) {
     toasts.addSuccess(getDeleteSuccesfulMessage(name));
-    onDeleting(false);
     onDeleted();
   }
 
   if (error) {
     toasts.addDanger(getDeleteFailMessage(name));
-    onDeleting(false);
   }
 
   const handleConfirm = () => {

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list.tsx
@@ -24,8 +24,7 @@ export function SloList() {
   const [sort, setSort] = useState<SortType>('name');
   const [indicatorTypeFilter, setIndicatorTypeFilter] = useState<FilterType[]>([]);
 
-  const [isCloning, setIsCloning] = useState(false);
-  const [isDeleting, setIsDeleting] = useState(false);
+  const [isCloningOrDeleting, setIsCloningOrDeleting] = useState(false);
   const [shouldReload, setShouldReload] = useState(false);
 
   const {
@@ -43,17 +42,15 @@ export function SloList() {
   useEffect(() => {
     if (shouldReload) {
       setShouldReload(false);
-      setIsCloning(false);
-      setIsDeleting(false);
     }
-  }, [shouldReload]);
 
-  const handleCloning = (cloning: boolean) => {
-    setIsCloning(cloning);
-  };
+    if (!isLoadingSloList) {
+      setIsCloningOrDeleting(false);
+    }
+  }, [isLoadingSloList, shouldReload]);
 
-  const handleDeleting = (deleting: boolean) => {
-    setIsDeleting(deleting);
+  const handleCloningOrDeleting = () => {
+    setIsCloningOrDeleting(true);
   };
 
   const handleClonedOrDeleted = () => {
@@ -85,7 +82,7 @@ export function SloList() {
     <EuiFlexGroup direction="column" gutterSize="m" data-test-subj="sloList">
       <EuiFlexItem grow>
         <SloListSearchFilterSortBar
-          loading={isLoadingSloList || isCloning || isDeleting}
+          loading={isLoadingSloList || isCloningOrDeleting}
           onChangeQuery={handleChangeQuery}
           onChangeSort={handleChangeSort}
           onChangeIndicatorTypeFilter={handleChangeIndicatorTypeFilter}
@@ -98,8 +95,8 @@ export function SloList() {
           loading={isLoadingSloList}
           error={error}
           onCloned={handleClonedOrDeleted}
-          onCloning={handleCloning}
-          onDeleting={handleDeleting}
+          onCloning={handleCloningOrDeleting}
+          onDeleting={handleCloningOrDeleting}
           onDeleted={handleClonedOrDeleted}
         />
       </EuiFlexItem>

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_item.tsx
@@ -35,9 +35,9 @@ export interface SloListItemProps {
   historicalSummary?: HistoricalSummaryResponse[];
   historicalSummaryLoading: boolean;
   onCloned: () => void;
-  onCloning: (isCloning: boolean) => void;
+  onCloning: () => void;
   onDeleted: () => void;
-  onDeleting: (isDeleting: boolean) => void;
+  onDeleting: () => void;
 }
 
 export function SloListItem({
@@ -94,7 +94,9 @@ export function SloListItem({
   };
 
   useEffect(() => {
-    onCloning(isCloning);
+    if (isCloning) {
+      onCloning();
+    }
 
     if (isCloned) {
       onCloned();

diff --git a/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.tsx b/x-pack/plugins/observability/public/pages/slos/components/slo_list_items.tsx
@@ -18,9 +18,9 @@ export interface Props {
   loading: boolean;
   error: boolean;
   onCloned: () => void;
-  onCloning: (isCloning: boolean) => void;
+  onCloning: () => void;
   onDeleted: () => void;
-  onDeleting: (isDeleting: boolean) => void;
+  onDeleting: () => void;
 }
 
 export function SloListItems({