gradual increment of new txs num

lib/hooks/useGradualIncrement.tsx

+import _clamp from 'lodash/clamp';
+import React from 'react';
+
+const MAX_DELAY = 500;
+const MIN_DELAY = 50;
+
+export default function useGradualIncrement(initialValue: number): [number, (inc: number) => void] {
+  const [ num, setNum ] = React.useState(initialValue);
+  const queue = React.useRef<number>(0);
+  const timeoutId = React.useRef(0);
+
+  const incrementDelayed = React.useCallback(() => {
+    if (queue.current === 0) {
+      return;
+    }
+
+    queue.current--;
+    setNum(prev => prev + 1);
+    timeoutId.current = 0;
+  }, []);
+
+  const increment = React.useCallback((inc: number) => {
+    if (inc < 1) {
+      return;
+    }
+
+    queue.current += inc;
+
+    if (!timeoutId.current) {
+      timeoutId.current = window.setTimeout(incrementDelayed, 0);
+    }
+  }, [ incrementDelayed ]);
+
+  React.useEffect(() => {
+    if (queue.current > 0 && !timeoutId.current) {
+      const delay = _clamp(MAX_DELAY / queue.current * 1.5, MIN_DELAY, MAX_DELAY);
+      timeoutId.current = window.setTimeout(incrementDelayed, delay);
+    }
+  }, [ incrementDelayed, num ]);
+
+  React.useEffect(() => {
+    return () => {
+      window.clearTimeout(timeoutId.current);
+    };
+  }, []);
+
+  return [ num, increment ];
+}

lib/hooks/useNewTxsSocket.tsx

@@ -2,6 +2,7 @@ import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import { ROUTES } from 'lib/link/routes';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -36,19 +37,19 @@ function assertIsNewPendingTxResponse(response: unknown): response is { pending_
 
 export default function useNewTxsSocket() {
   const router = useRouter();
-  const [ num, setNum ] = React.useState(0);
+  const [ num, setNum ] = useGradualIncrement(0);
   const [ socketAlert, setSocketAlert ] = React.useState('');
 
   const { topic, event } = getSocketParams(router);
 
   const handleNewTxMessage = React.useCallback((response: { transaction: number } | { pending_transaction: number } | unknown) => {
     if (assertIsNewTxResponse(response)) {
-      setNum((prev) => prev + response.transaction);
+      setNum(response.transaction);
     }
     if (assertIsNewPendingTxResponse(response)) {
-      setNum((prev) => prev + response.pending_transaction);
+      setNum(response.pending_transaction);
     }
-  }, []);
+  }, [ setNum ]);
 
   const handleSocketClose = React.useCallback(() => {
     setSocketAlert('Connection is lost. Please click here to load new transactions.');