Spinner fixed (#1964)

* Spinner fixed

* Tests refactored

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:

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 />

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