add loading indicator to topic settings tab (#1746)

Co-authored-by: Oleg Shur <workshur@gmail.com>

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;
   }
 

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', () => {