Merge pull request #367 from blockscout/gradual-increment

gradual increment for new tx notice

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.');

ui/home/LatestTxsNotice.tsx

-import { Alert, Spinner, Text, Link, useColorModeValue, useTheme } from '@chakra-ui/react';
+import { Alert, Text, Link, useColorModeValue, useTheme } from '@chakra-ui/react';
 import { transparentize } from '@chakra-ui/theme-tools';
 import React from 'react';
 
@@ -18,18 +18,14 @@ const LatestTxsNotice = ({ className }: Props) => {
     content = 'Connection is lost. Please reload page';
   } else if (!num) {
     content = (
-      <>
-        <Spinner size="sm" mr={ 3 }/>
-        <Text>scanning new transactions ...</Text>
-      </>
+      <Text>scanning new transactions...</Text>
     );
   } else {
     const txsUrl = link('txs');
     content = (
       <>
-        <Spinner size="sm" mr={ 3 }/>
-        <Text as="span" whiteSpace="pre">+ { num } new transaction{ num > 1 ? 's' : '' }. </Text>
-        <Link href={ txsUrl }>View all</Link>
+        <Link href={ txsUrl }>{ num } more transaction{ num > 1 ? 's' : '' }</Link>
+        <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
       </>
     );
   }

ui/txs/TxsNewItemNotice.tsx

-import { Alert, Spinner, Text, Link, chakra } from '@chakra-ui/react';
+import { Alert, Link, Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
@@ -36,14 +36,17 @@ const TxsNewItemNotice = ({ children, className }: Props) => {
     }
 
     if (!num) {
-      return null;
+      return (
+        <Alert className={ className } status="warning" p={ 4 } fontWeight={ 400 }>
+          scanning new transactions...
+        </Alert>
+      );
     }
 
     return (
       <Alert className={ className } status="warning" p={ 4 } fontWeight={ 400 }>
-        <Spinner size="sm" mr={ 3 }/>
-        <Text as="span" whiteSpace="pre">+ { num } new transaction{ num > 1 ? 's' : '' }. </Text>
-        <Link onClick={ handleClick }>View in list</Link>
+        <Link onClick={ handleClick }>{ num } more transaction{ num > 1 ? 's' : '' }</Link>
+        <Text whiteSpace="pre"> ha{ num > 1 ? 've' : 's' } come in</Text>
       </Alert>
     );
   })();