[Index details page] Only 1 loading indicator

elastic · Aug 25, 2023 · 7f2caad · 7f2caad
1 parent e8f032d
commit 7f2caad
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 28 deletions.
diff --git a/...ndex_management/public/application/sections/home/index_list/details_page/details_page.tsx b/...ndex_management/public/application/sections/home/index_list/details_page/details_page.tsx
@@ -15,8 +15,6 @@ import {
   EuiPageHeaderProps,
   EuiPageSection,
   EuiButton,
-  EuiFlexGroup,
-  EuiFlexItem,
 } from '@elastic/eui';
 import { SectionLoading } from '@kbn/es-ui-shared-plugin/public';
 
@@ -133,31 +131,17 @@ export const DetailsPage: React.FunctionComponent<
   return (
     <>
       <EuiPageSection paddingSize="none">
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              data-test-subj="indexDetailsBackToIndicesButton"
-              color="text"
-              iconType="arrowLeft"
-              onClick={navigateToAllIndices}
-            >
-              <FormattedMessage
-                id="xpack.idxMgmt.indexDetails.backToIndicesButtonLabel"
-                defaultMessage="Back to all indices"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-          {isLoading && (
-            <EuiFlexItem>
-              <SectionLoading inline={true}>
-                <FormattedMessage
-                  id="xpack.idxMgmt.indexDetails.reloadingDescription"
-                  defaultMessage="Re-loading index details…"
-                />
-              </SectionLoading>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
+        <EuiButton
+          data-test-subj="indexDetailsBackToIndicesButton"
+          color="text"
+          iconType="arrowLeft"
+          onClick={navigateToAllIndices}
+        >
+          <FormattedMessage
+            id="xpack.idxMgmt.indexDetails.backToIndicesButtonLabel"
+            defaultMessage="Back to all indices"
+          />
+        </EuiButton>
       </EuiPageSection>
 
       <EuiSpacer size="l" />

diff --git a/...nagement/public/application/sections/home/index_list/details_page/manage_index_button.tsx b/...nagement/public/application/sections/home/index_list/details_page/manage_index_button.tsx
@@ -56,7 +56,13 @@ export const ManageIndexButton: FunctionComponent<Props> = ({
 
   // the variables are created to write the index actions in a way to later re-use for indices list without redux
   const indexNames = useMemo(() => [indexName], [indexName]);
-  const reloadIndices = reloadIndexDetails;
+
+  const reloadIndices = useCallback(async () => {
+    setIsLoading(true);
+    await reloadIndexDetails();
+    setIsLoading(false);
+  }, [reloadIndexDetails]);
+
   const indices = [indexDetails];
   const indexStatusByName = getIndexStatusByName(indexNames, indices);