ydb-embedded-ui 4.31.1 → 4.31.2

package/dist/components/VirtualTable/VirtualTable.tsx

@@ -76,7 +76,7 @@ export const VirtualTable = <T,>({
 
     const [error, setError] = useState<IResponseError>();
 
-    const [pendingRequests, setPendingRequests] = useState<Record<string, NodeJS.Timeout>>({});
+    const pendingRequests = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
 
     const fetchChunkData = useCallback(
         async (id: string) => {
@@ -105,10 +105,13 @@ export const VirtualTable = <T,>({
                 }
             }, DEFAULT_REQUEST_TIMEOUT);
 
-            setPendingRequests((reqs) => {
-                reqs[id] = timer;
-                return reqs;
-            });
+            // Chunk data load could be triggered by different events
+            // Cancel previous chunk request, while it is pending (instead of concurrentId)
+            if (pendingRequests.current[id]) {
+                const oldTimer = pendingRequests.current[id];
+                window.clearTimeout(oldTimer);
+            }
+            pendingRequests.current[id] = timer;
         },
         [fetchData, limit, sortParams],
     );
@@ -117,20 +120,27 @@ export const VirtualTable = <T,>({
         dispatch(initChunk(id));
     }, []);
 
-    const onLeave = useCallback<OnLeave>(
-        (id) => {
-            dispatch(removeChunk(id));
+    const onLeave = useCallback<OnLeave>((id) => {
+        dispatch(removeChunk(id));
+
+        // If there is a pending request for the removed chunk, cancel it
+        // It made to prevent excessive requests on fast scroll
+        if (pendingRequests.current[id]) {
+            const timer = pendingRequests.current[id];
+            window.clearTimeout(timer);
+            delete pendingRequests.current[id];
+        }
+    }, []);
 
-            // If there is a pending request for the removed chunk, cancel it
-            // It made to prevent excessive requests on fast scroll
-            if (pendingRequests[id]) {
-                const timer = pendingRequests[id];
+    // Cancel all pending requests on component unmount
+    useEffect(() => {
+        return () => {
+            Object.values(pendingRequests.current).forEach((timer) => {
                 window.clearTimeout(timer);
-                delete pendingRequests[id];
-            }
-        },
-        [pendingRequests],
-    );
+            });
+            pendingRequests.current = {};
+        };
+    }, []);
 
     // Load chunks if they become active
     // This mecanism helps to set chunk active state from different sources, but load data only once

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.31.1",
+  "version": "4.31.2",
   "files": [
     "dist"
   ],
@@ -53,9 +53,9 @@
   "scripts": {
     "start": "react-app-rewired start",
     "dev": "DISABLE_ESLINT_PLUGIN=true TSC_COMPILE_ON_ERROR=true REACT_APP_BACKEND=http://localhost:8765 npm start",
-    "build": "DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
+    "build": "rm -rf build && DISABLE_ESLINT_PLUGIN=true react-app-rewired build",
     "//build:embedded": "echo 'PUBLIC_URL is a setting for create-react-app. Embedded version is built and hosted as is on ydb servers, with no way of knowing the final URL pattern. PUBLIC_URL=. keeps paths to all static relative, allowing servers to handle them as needed'",
-    "build:embedded": "rm -rf build && PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
+    "build:embedded": "GENERATE_SOURCEMAP=false PUBLIC_URL=. REACT_APP_BACKEND=http://localhost:8765 npm run build",
     "lint:styles": "stylelint 'src/**/*.scss'",
     "unimported": "npx unimported --no-cache",
     "package": "rm -rf dist && copyfiles -u 1 'src/**/*' dist",