[Security Solution ] Fixes Timeline infinite loading bug (#188943)

## Summary

handles #188942

There was a hook which was causing additionall re-renders. Removed that.
Timeline should be working fine. Below you can see that timeline works
fine with multiple time-ranges. The original issue did not always occur
consistently, only when there was a change in events fetched.



https://github.com/user-attachments/assets/861e5501-f857-40bc-989e-a5a0e565585b

x-pack/plugins/security_solution/public/timelines/containers/index.test.tsx

@@ -14,6 +14,7 @@ import { TimelineId } from '../../../common/types/timeline';
 import { useIsExperimentalFeatureEnabled } from '../../common/hooks/use_experimental_features';
 import { mockTimelineData } from '../../common/mock';
 import { useRouteSpy } from '../../common/utils/route/use_route_spy';
+import { useFetchNotes } from '../../notes/hooks/use_fetch_notes';
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {
@@ -25,6 +26,10 @@ jest.mock('react-redux', () => {
   };
 });
 
+jest.mock('../../notes/hooks/use_fetch_notes');
+const onLoadMock = jest.fn();
+const useFetchNotesMock = useFetchNotes as jest.Mock;
+
 const mockEvents = mockTimelineData.filter((i, index) => index <= 11);
 
 const mockSearch = jest.fn();
@@ -102,8 +107,15 @@ mockUseRouteSpy.mockReturnValue([
 
 describe('useTimelineEvents', () => {
   useIsExperimentalFeatureEnabledMock.mockReturnValue(false);
+
   beforeEach(() => {
     mockSearch.mockReset();
+    useFetchNotesMock.mockClear();
+    onLoadMock.mockClear();
+
+    useFetchNotesMock.mockReturnValue({
+      onLoad: onLoadMock,
+    });
   });
 
   const startDate: string = '2020-07-07T08:20:18.966Z';
@@ -359,4 +371,22 @@ describe('useTimelineEvents', () => {
       expect(mockSearch).toHaveBeenCalledTimes(0);
     });
   });
+
+  describe('Fetch Notes', () => {
+    test('should call onLoad for notes when events are fetched', async () => {
+      await act(async () => {
+        const { waitFor } = renderHook<UseTimelineEventsProps, [DataLoadingState, TimelineArgs]>(
+          (args) => useTimelineEvents(args),
+          {
+            initialProps: { ...props },
+          }
+        );
+
+        await waitFor(() => {
+          expect(mockSearch).toHaveBeenCalledTimes(1);
+          expect(onLoadMock).toHaveBeenNthCalledWith(1, expect.objectContaining(mockEvents));
+        });
+      });
+    });
+  });
 });

x-pack/plugins/security_solution/public/timelines/containers/index.tsx

@@ -502,11 +502,17 @@ export const useTimelineEvents = ({
   });
   const { onLoad } = useFetchNotes();
 
+  const onTimelineSearchComplete: OnNextResponseHandler = useCallback(
+    (response) => {
+      onLoad(response.events);
+    },
+    [onLoad]
+  );
+
   useEffect(() => {
     if (!timelineSearchHandler) return;
-    timelineSearchHandler();
-    onLoad(timelineResponse.events);
-  }, [timelineSearchHandler, onLoad, timelineResponse.events]);
+    timelineSearchHandler(onTimelineSearchComplete);
+  }, [timelineSearchHandler, onTimelineSearchComplete]);
 
   return [dataLoadingState, timelineResponse];
 };