speed up increment

lib/hooks/useGradualIncrement.tsx

-import _clamp from 'lodash/clamp';
 import React from 'react';
 
-const MAX_DELAY = 500;
-const MIN_DELAY = 50;
+const DURATION = 300;
 
 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 delay = React.useRef(0);
 
   const incrementDelayed = React.useCallback(() => {
     if (queue.current === 0) {
@@ -33,8 +32,13 @@ export default function useGradualIncrement(initialValue: number): [number, (inc
 
   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);
+      if (!delay.current) {
+        delay.current = DURATION / queue.current;
+      } else if (delay.current > DURATION / queue.current) {
+        // in case if queue size is increased since last DOM update
+        delay.current = DURATION / queue.current;
+      }
+      timeoutId.current = window.setTimeout(incrementDelayed, delay.current);
     }
   }, [ incrementDelayed, num ]);
 

ui/pages/Vercel.tsx

-import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Link, Code } from '@chakra-ui/react';
+import { VStack, Textarea, Button, Alert, AlertTitle, AlertDescription, Link, Code, Flex, Box } from '@chakra-ui/react';
 import * as Sentry from '@sentry/react';
 import type { ChangeEvent } from 'react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
 import * as cookies from 'lib/cookies';
+import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import useToast from 'lib/hooks/useToast';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -12,6 +13,7 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 { /* will be deleted when we move to new CI */ }
 const Vercel = () => {
   const toast = useToast();
+  const [ num, setNum ] = useGradualIncrement(0);
 
   const [ isFormVisible, setFormVisibility ] = React.useState(false);
   const [ token, setToken ] = React.useState('');
@@ -47,10 +49,20 @@ const Vercel = () => {
 
   const prodUrl = 'https://blockscout.com/poa/core';
 
+  const handleNumIncrement = React.useCallback(() => {
+    for (let index = 0; index < 5; index++) {
+      setNum(5);
+    }
+  }, [ setNum ]);
+
   return (
     <Page>
       <VStack gap={ 4 } alignItems="flex-start" maxW="1000px">
         <PageTitle text="Vercel page"/>
+        <Flex columnGap={ 2 } alignItems="center">
+          <Box w="50px" textAlign="center">{ num }</Box>
+          <Button onClick={ handleNumIncrement } size="sm">add</Button>
+        </Flex>
         { isFormVisible && (
           <>
             <Alert status="error" flexDirection="column" alignItems="flex-start">