From 9f774d776c524fd7c3f0d270ad27ee8d234bf081 Mon Sep 17 00:00:00 2001
From: Artem Baskal <a.baskal@adguard.com>
Date: Fri, 5 Mar 2021 17:33:58 +0300
Subject: [PATCH] 2694: Statistics of request count of top clients not always
 displayed correctly

---
 client/src/components/Logs/InfiniteTable.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Logs/InfiniteTable.js b/client/src/components/Logs/InfiniteTable.js
index bced3340..55c9db6d 100644
--- a/client/src/components/Logs/InfiniteTable.js
+++ b/client/src/components/Logs/InfiniteTable.js
@@ -3,7 +3,7 @@ import React, {
     useEffect,
     useRef,
 } from 'react';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import propTypes from 'prop-types';
 import throttle from 'lodash/throttle';
@@ -25,19 +25,21 @@ const InfiniteTable = ({
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const loader = useRef(null);
+    const loadingRef = useRef(null);
 
-    const {
-        isEntireLog,
-        processingGetLogs,
-    } = useSelector((state) => state.queryLogs, shallowEqual);
-
+    const isEntireLog = useSelector((state) => state.queryLogs.isEntireLog);
+    const processingGetLogs = useSelector((state) => state.queryLogs.processingGetLogs);
     const loading = isLoading || processingGetLogs;
 
     const listener = useCallback(() => {
-        if (loader.current && isScrolledIntoView(loader.current)) {
+        if (!loadingRef.current && loader.current && isScrolledIntoView(loader.current)) {
             dispatch(getLogs());
         }
-    }, [loader.current, isScrolledIntoView, getLogs]);
+    }, []);
+
+    useEffect(() => {
+        loadingRef.current = processingGetLogs;
+    }, [processingGetLogs]);
 
     useEffect(() => {
         listener();