From 4907e187f870c7e1e7dd366c2244491f0fee9506 Mon Sep 17 00:00:00 2001
From: Anifah Bhadmus <anifahbhad@gmail.com>
Date: Mon, 28 Mar 2022 11:48:07 +0100
Subject: [PATCH] add loading indicator to topic settings tab (#1746)

Co-authored-by: Oleg Shur <workshur@gmail.com>
---
 .../components/Topics/Topic/Details/Settings/Settings.tsx  | 7 ++++++-
 .../Topic/Details/Settings/__test__/Settings.spec.tsx      | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
index 8d9264ec96..acbe176bc5 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/Settings.tsx
@@ -1,3 +1,4 @@
+import PageLoader from 'components/common/PageLoader/PageLoader';
 import { Table } from 'components/common/table/Table/Table.styled';
 import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
 import { TopicConfig } from 'generated-sources';
@@ -25,7 +26,11 @@ const Settings: React.FC<Props> = ({
     fetchTopicConfig(clusterName, topicName);
   }, [fetchTopicConfig, clusterName, topicName]);
 
-  if (!isFetched || !config) {
+  if (!isFetched) {
+    return <PageLoader />;
+  }
+
+  if (!config) {
     return null;
   }
 
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/Settings.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/Settings.spec.tsx
index 5b3b37f099..23a39b50c6 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/Settings.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Settings/__test__/Settings.spec.tsx
@@ -33,7 +33,7 @@ describe('Settings', () => {
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
   });
 
-  it('should check and return null if it is not fetched and config is given', () => {
+  it('should show Page loader when it is in fetching state and config is given', () => {
     render(
       <Settings
         clusterName={mockClusterName}
@@ -45,6 +45,7 @@ describe('Settings', () => {
     );
 
     expect(screen.queryByRole('table')).not.toBeInTheDocument();
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
   });
 
   it('should check and return null if it is not fetched and config is not given', () => {