client: Fix race condition in InfiniteScroll

client/src/api/managment-service.ts

@@ -478,6 +478,7 @@ class ManagmentServiceApi {
       // eslint-disable-next-line
       `/api/v1/reports/application-incidents/${incidentId}/sources?page=${page}&size=${size}&sort=timestamp`,
     );
+
     return report.data;
   }
 
@@ -512,13 +513,9 @@ class ManagmentServiceApi {
     return response.data;
   }
 
-  public async getLatestReport(): Promise<
-    ReportDetails
-  > {
+  public async getLatestReport(): Promise<ReportDetails> {
     await this.refreshTokenIfExpired();
-    const response = await this.axiosInstance.get(
-      '/api/v1/reports/latest',
-    );
+    const response = await this.axiosInstance.get('/api/v1/reports/latest');
     return response.data;
   }
 

client/src/hooks/useInfiniteScroll.tsx

@@ -1,11 +1,11 @@
 import { debounce } from 'lib/debounce';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 interface UseInfiniteScrollParams {
   scrollTargetRef: React.RefObject<HTMLDivElement>;
   debounceTreshhold?: number;
   scrollTreshhold?: number;
-  handleScroll: () => void;
+  handleScroll: () => Promise<void> | void;
 }
 
 const useInfiniteScroll = ({
@@ -14,18 +14,25 @@ const useInfiniteScroll = ({
   scrollTreshhold = 2,
   handleScroll,
 }: UseInfiniteScrollParams) => {
+  const [isHandling, setIsHandling] = useState(false);
   useEffect(() => {
-    const onScroll = () => {
+    const onScroll = async () => {
       const element = scrollTargetRef.current;
       if (!element) {
         return;
       }
 
+      if (isHandling === true) {
+        return;
+      }
+
       if (
         element.scrollTop + element.clientHeight >=
         element.scrollHeight / scrollTreshhold
       ) {
-        handleScroll();
+        setIsHandling(true);
+        await handleScroll();
+        setIsHandling(false);
       }
     };