Created custom hook to handle fetch on scroll

src/components/pipelineRuns-list/PipelineRunsList.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom-v5-compat';
 import { SortByDirection } from '@patternfly/react-table';
 import {
   ListPageBody,
@@ -11,8 +13,7 @@ import { usePipelineRunsFilters } from './usePipelineRunsFilters';
 import { PipelineRunKind } from '../../types';
 import { useGetPipelineRuns } from '../hooks/useTektonResult';
 import PipelineRunsRow from './PipelineRunsRow';
-import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom-v5-compat';
+import { useLoadMoreOnScroll } from '../utils/tekton-results';
 
 import './PipelineRunsList.scss';
 
@@ -56,23 +57,7 @@ const PipelineRunsList: React.FC<PipelineRunsListProps> = ({
     filters,
   );
 
-  // Once OCPBUGS-43538 ticket is closed, use onRowsRendered prop in VirtualizedTable for load more on scroll
-  React.useEffect(() => {
-    if (!loadMoreRef.current || !pipelineRunsLoaded) return;
-
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (entry.isIntersecting && nextPageToken) {
-        nextPageToken();
-      }
-    });
-
-    observer.observe(loadMoreRef.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nextPageToken, pipelineRunsLoaded]);
+  useLoadMoreOnScroll(loadMoreRef, nextPageToken, pipelineRunsLoaded);
 
   return (
     <ListPageBody>

src/components/pipelines-tasks/TaskRunsList.tsx

@@ -19,6 +19,7 @@ import { TaskRunModel } from '../../models';
 import { ALL_NAMESPACES_KEY, TektonResourceLabel } from '../../consts';
 import { getReferenceForModel } from '../pipelines-overview/utils';
 import { useTaskRunsFilters } from './useTaskRunsFilters';
+import { useLoadMoreOnScroll } from '../utils/tekton-results';
 
 interface TaskRunsListPageProps {
   showTitle?: boolean;
@@ -123,23 +124,8 @@ const TaskRunsList: React.FC<TaskRunsListPageProps> = ({
     useTaskRunsFilters(),
   );
 
-  // Once OCPBUGS-43538 ticket is closed, use onRowsRendered prop in VirtualizedTable for load more on scroll
-  React.useEffect(() => {
-    if (!loadMoreRef.current || !loaded) return;
+  useLoadMoreOnScroll(loadMoreRef, nextPageToken, loaded);
 
-    const observer = new IntersectionObserver((entries) => {
-      const entry = entries[0];
-      if (entry.isIntersecting && nextPageToken) {
-        nextPageToken();
-      }
-    });
-
-    observer.observe(loadMoreRef.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nextPageToken, loaded]);
   return (
     <>
       <ListPageBody>

src/components/utils/tekton-results.ts

@@ -7,6 +7,7 @@ import {
   k8sGet,
 } from '@openshift-console/dynamic-plugin-sdk';
 import _ from 'lodash';
+import { RefObject, useEffect } from 'react';
 import {
   ALL_NAMESPACES_KEY,
   DELETED_RESOURCE_IN_K8S_ANNOTATION,
@@ -491,3 +492,24 @@ export const getTaskRunLog = async (taskRunPath: string): Promise<string> => {
   )}`;
   return consoleProxyFetchLog({ url, method: 'GET', allowInsecure: true });
 };
+
+export const useLoadMoreOnScroll = (
+  loadMoreRef: RefObject<HTMLElement>,
+  nextPageToken: (() => void) | null,
+  loaded: boolean,
+) => {
+  useEffect(() => {
+    if (!loadMoreRef.current || !loaded) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting && nextPageToken) {
+        nextPageToken();
+      }
+    });
+    observer.observe(loadMoreRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [nextPageToken, loaded, loadMoreRef]);
+};