#171 Tweaks for blocks search

apps/staking/src/components/SearchInput.tsx

@@ -31,19 +31,20 @@ const SearchInput: FunctionComponent<SearchInputProps> = (props) => {
         'white',
         'dark.gray.tertiary'
     );
-    const iconColor = useColorModeValue('gray.900', 'white');
+    const textColor = useColorModeValue('gray.900', 'white');
 
     return (
         <InputGroup {...rest}>
             <InputLeftElement pointerEvents="none">
-                <SearchIcon color={iconColor} />
+                <SearchIcon color={textColor} />
             </InputLeftElement>
 
             <Input
                 _placeholder={{
                     color: placeholderColor,
                 }}
                 borderRadius="3px"
+                color={textColor}
                 placeholder={placeholder}
                 backgroundColor={searchBackgroundColor}
                 onChange={onSearchChange}

apps/staking/src/pages/blocks/[[...block]].tsx

@@ -9,7 +9,7 @@
 // WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 // PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
-import React, { FC, FunctionComponent, useState } from 'react';
+import React, { FC, FunctionComponent, useState, useCallback } from 'react';
 import { useRouter } from 'next/router';
 import {
     Button,
@@ -18,10 +18,10 @@ import {
     Spinner,
     StackProps,
     Tag,
-    TagLabel,
     TagCloseButton,
-    VStack,
+    TagLabel,
     useColorModeValue,
+    VStack,
 } from '@chakra-ui/react';
 import { FaEllipsisH } from 'react-icons/fa';
 
@@ -34,6 +34,7 @@ import BlockCard from '../../components/block/BlockCard';
 import SearchInput from '../../components/SearchInput';
 import PageHeader from '../../components/PageHeader';
 import PageHead from '../../components/PageHead';
+import { debounce } from 'lodash/fp';
 
 interface FilterProps {
     label: string;
@@ -122,34 +123,46 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
     // TODO: use blockId
     blockId = blockId && blockId.length > 0 ? (blockId[0] as string) : '';
 
-    const [searchKey, setSearchKey] = useState<string>(blockId);
+    const [debouncedSearchKey, setDebouncedSearchKey] = useState(blockId);
 
     // list of all blocks, unfiltered
     const all = useBlocks(undefined, 20);
 
     // list of blocks filtered by producer
-    const byProducer = useBlocks({ producer: searchKey }, 20);
+    const byProducer = useBlocks({ producer: debouncedSearchKey }, 20);
 
     // list of blocks filtered by node
-    const byNode = useBlocks({ node: searchKey }, 20);
+    const byNode = useBlocks({ node: debouncedSearchKey }, 20);
     const pageBg = useColorModeValue('white', 'dark.gray.primary');
 
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Lodash debounce needs to be set up like this in react context
+    const debounced = useCallback(
+        debounce(500, (nextValue: string) => {
+            setDebouncedSearchKey(nextValue);
+        }),
+        []
+    );
+
     return (
         <Layout>
             <PageHead title="Cartesi Proof of Stake Blocks" />
 
             <PageHeader title="Blocks">
                 <SearchInput
                     w={[100, 200, 400, 400]}
-                    onSearchChange={(e) => setSearchKey(e.target.value)}
+                    placeholder="Search by producer"
+                    onSearchChange={(e) => {
+                        const nextValue = e.target.value;
+                        debounced(nextValue);
+                    }}
                 />
             </PageHeader>
 
             <HStack w="100%" px="6vw" py="5" bg={pageBg}>
                 <BlocksChart result={all} />
             </HStack>
 
-            {!searchKey && (
+            {!debouncedSearchKey && (
                 <BlockList
                     chainId={chainId}
                     result={all}
@@ -163,7 +176,7 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
                 chainId={chainId}
                 result={byProducer}
                 filterField="producer"
-                filterValue={searchKey}
+                filterValue={debouncedSearchKey}
                 w="100%"
                 px="6vw"
                 py="5"
@@ -173,7 +186,7 @@ const Blocks: FC<BlocksProps> = ({ chainId }) => {
                 chainId={chainId}
                 result={byNode}
                 filterField="node"
-                filterValue={searchKey}
+                filterValue={debouncedSearchKey}
                 w="100%"
                 px="6vw"
                 py="5"