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 a4128acd8d..7a0cb748f3 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 = ({ const handleSSECancel = () => { if (!source.current) return; - setIsFetching(false); source.current.close(); }; @@ -304,7 +303,6 @@ const Filters: React.FC = ({ 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 = ({ 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 cca9e1e85a..6a3d1d5e45 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 && ( 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 e176e8e7b5..351a55f5f0 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 );