Repository: provectus/kafka-ui
Issue: Show "Loading" when waiting for Topics Settings Tab
Labels: type/enhancement
good first issue
scope/frontend
status/accepted

### Is your proposal related to a problem?

Go to Topics -> select topic -> go to **Settings** tab.
When **Settings** tab is rendering the page is empty, when Topics Settings request executed table is updated with responded values.

### Describe the solution you'd like
I think we should show 'loading..' when waiting for Settings response. so that from a UX perspective the users will not be confused.

### Describe alternatives you've considered

<!--
  Let us know about other solutions you've tried or researched.
-->

### Additional context

<!--
  Is there anything else you can add about the proposal?
  You might want to link to related issues here, if you haven't already.
-->



Issue comments:
Hello there Mgrdich! 👋

Thank you and congratulations 🎉 for opening your very first issue in this project! 💖

In case you want to claim this issue, please comment down below! We will try to get back to you as soon as we can. 👀
First timer here - is it ok to work on this issue? @Haarolean @Mgrdich 
It should be Done like to https://github.com/provectus/kafka-ui/commit/ad628ed7ae0bd5f5648eefdaad67b9352705f50f
@Anifahb hey, unfortunately you can't do that yourself, I've assigned it to you. Please check our [contributing](https://github.com/provectus/kafka-ui/blob/master/CONTRIBUTING.md) guide.
> @Anifahb hey, unfortunately you can't do that yourself, I've assigned it to you. Please check our [contributing](https://github.com/provectus/kafka-ui/blob/master/CONTRIBUTING.md) guide.

Thank you for assigning this to me - will get started on it today.
@Anifahb thanks much!

Pull request review comments:

Patch that resolved the issue:
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 8d9264ec96a..acbe176bc50 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 5b3b37f0996..23a39b50c65 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', () => {


Test patch: