Repository: provectus/kafka-ui
Issue: Loading icon is still being displayed once the live mode is stopped
Labels: type/bug
scope/frontend
status/accepted
status/confirmed


Issue comments:

Pull request review comments:
you can write isFetching: !!isFetching
fixed

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
index a4128acd8d7..7a0cb748f30 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/Filters.tsx
@@ -229,7 +229,6 @@ const Filters: React.FC<FiltersProps> = ({
 
   const handleSSECancel = () => {
     if (!source.current) return;
-
     setIsFetching(false);
     source.current.close();
   };
@@ -304,7 +303,6 @@ const Filters: React.FC<FiltersProps> = ({
       sse.onmessage = ({ data }) => {
         const { type, message, phase, consuming }: TopicMessageEvent =
           JSON.parse(data);
-
         switch (type) {
           case TopicMessageEventTypeEnum.MESSAGE:
             if (message) {
@@ -317,7 +315,6 @@ const Filters: React.FC<FiltersProps> = ({
           case TopicMessageEventTypeEnum.PHASE:
             if (phase?.name) {
               updatePhase(phase.name);
-              setIsFetching(false);
             }
             break;
           case TopicMessageEventTypeEnum.CONSUMING:
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
index cca9e1e85ae..6a3d1d5e45d 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/MessagesTable.tsx
@@ -96,7 +96,7 @@ const MessagesTable: React.FC = () => {
               message={message}
             />
           ))}
-          {(isFetching || isLive) && !messages.length && (
+          {isFetching && isLive && !messages.length && (
             <tr>
               <td colSpan={10}>
                 <PageLoader />
diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
index e176e8e7b5e..351a55f5f03 100644
--- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
+++ b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/__test__/MessagesTable.spec.tsx
@@ -31,6 +31,7 @@ describe('MessagesTable', () => {
     params: URLSearchParams = searchParams,
     ctx: ContextProps = contextValue,
     messages: TopicMessage[] = [],
+    isFetching?: boolean,
     customHistory?: MemoryHistory
   ) => {
     const history =
@@ -51,7 +52,7 @@ describe('MessagesTable', () => {
             meta: {
               ...topicMessagesMetaPayload,
             },
-            isFetching: false,
+            isFetching: !!isFetching,
           },
         },
       }
@@ -86,7 +87,7 @@ describe('MessagesTable', () => {
     });
 
     it('should check the display of the loader element', () => {
-      setUpComponent(searchParams, { ...contextValue, isLive: true });
+      setUpComponent(searchParams, { ...contextValue, isLive: true }, [], true);
       expect(screen.getByRole('progressbar')).toBeInTheDocument();
     });
 
@@ -98,7 +99,7 @@ describe('MessagesTable', () => {
       });
       jest.spyOn(mockedHistory, 'push');
 
-      setUpComponent(customSearchParam, contextValue, [], mockedHistory);
+      setUpComponent(customSearchParam, contextValue, [], false, mockedHistory);
 
       userEvent.click(screen.getByRole('button', { name: 'Next' }));
       expect(mockedHistory.push).toHaveBeenCalledWith({
@@ -120,6 +121,7 @@ describe('MessagesTable', () => {
         customSearchParam,
         { ...contextValue, searchParams: customSearchParam },
         [],
+        false,
         mockedHistory
       );
 


Test patch: