fix: fix skeleton hover state bug (#4409)

* fix skeleton hover state bug

* corretc hover color

* add transition
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/SearchBar.css.ts

@@ -67,11 +67,12 @@ export const suggestionRow = style([
     justifyContent: 'space-between',
     paddingY: '8',
     paddingX: '16',
+    transition: '250',
   }),
   {
     ':hover': {
       cursor: 'pointer',
-      background: vars.color.lightGrayContainer,
+      background: vars.color.lightGrayButton,
     },
     textDecoration: 'none',
   },

src/components/NavBar/SuggestionRow.tsx

@@ -8,7 +8,7 @@ import { useSearchHistory } from 'nft/hooks'
 import { FungibleToken, GenieCollection } from 'nft/types'
 import { ethNumberStandardFormatter } from 'nft/utils/currency'
 import { putCommas } from 'nft/utils/putCommas'
-import { useCallback, useEffect, useReducer, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 
 import { TokenWarningRedIcon, VerifiedIcon } from '../../nft/components/icons'
@@ -180,16 +180,9 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
 }
 
 export const SkeletonRow = () => {
-  const [isHovered, toggleHovered] = useReducer((s) => !s, false)
-
   return (
     <Box className={styles.searchBarDropdown}>
-      <Row
-        background={isHovered ? 'lightGrayButton' : 'none'}
-        onMouseEnter={toggleHovered}
-        onMouseLeave={toggleHovered}
-        className={styles.suggestionRow}
-      >
+      <Row className={styles.suggestionRow}>
         <Row>
           <Box className={styles.imageHolder} />
           <Box borderRadius="round" height="16" width="160" background="loading" />