feat: add animation to search skeleton and typing state (#4598)

* fade when loading

* fade results between searches

* trending search loading skeleton

* adjust skeleton and cleanup

* remove unused style change

* eslint

* add trendingTokens to query and remove unnecessary returns

* move array map compatibility higher in the call hierarchy

* add feature flag to isLoading param
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/SuggestionRow.tsx

@@ -175,13 +175,21 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
 
 export const SkeletonRow = () => {
   return (
-    <Box className={styles.searchBarDropdown}>
-      <Row className={styles.suggestionRow}>
-        <Row>
-          <Box className={styles.imageHolder} />
-          <Box borderRadius="round" height="16" width="160" background="loading" />
-        </Row>
+    <Row className={styles.suggestionRow}>
+      <Row width="full">
+        <Box className={styles.imageHolder} />
+        <Column gap="4" width="full">
+          <Row justifyContent="space-between">
+            <Box borderRadius="round" height="20" background="loading" style={{ width: '180px' }} />
+            <Box borderRadius="round" height="20" width="48" background="loading" />
+          </Row>
+
+          <Row justifyContent="space-between">
+            <Box borderRadius="round" height="16" width="120" background="loading" />
+            <Box borderRadius="round" height="16" width="48" background="loading" />
+          </Row>
+        </Column>
       </Row>
-    </Box>
+    </Row>
   )
 }

src/nft/css/sprinkles.css.ts

@@ -24,6 +24,7 @@ const themeContractValues = {
     magicGradient: '',
     placeholder: '',
     lightGrayButton: '',
+    loading: '',
 
     // Opacities of black and white
     white95: '',
@@ -55,6 +56,7 @@ const dimensions = {
   '2': '2',
   '4': '4px',
   '8': '8px',
+  '12': '12px',
   '16': '16px',
   '18': '18px',
   '20': '20px',
@@ -142,7 +144,6 @@ export const vars = createGlobalTheme(':root', {
     transculent: '#7F7F7F',
     transparent: 'transparent',
     none: 'none',
-    loading: '#7C85A24D',
 
     // new uniswap colors:
     blue400: '#4C82FB',
@@ -153,6 +154,7 @@ export const vars = createGlobalTheme(':root', {
     green200: '#5CFE9D',
     green400: '#1A9550',
     grey900: '#0E111A',
+    grey800: '#141B2B',
     grey700: '#293249',
     grey500: '#5E6887',
     grey400: '#7C85A2',
@@ -298,7 +300,7 @@ const layoutStyles = defineProperties({
     position: ['absolute', 'fixed', 'relative', 'sticky', 'static'],
     objectFit: ['contain', 'cover'],
     order: [0, 1],
-    opacity: ['auto', '0', '1'],
+    opacity: ['auto', '0', '0.3', '0.5', '0.7', '1'],
   } as const,
   shorthands: {
     paddingX: ['paddingLeft', 'paddingRight'],

src/nft/themes/darkTheme.ts

@@ -22,6 +22,7 @@ export const darkTheme: Theme = {
     magicGradient: vars.color.blue400,
     placeholder: vars.color.grey400,
     lightGrayButton: vars.color.grey700,
+    loading: vars.color.grey800,
 
     // Opacities of black and white
     white95: '#0E111AF2',

src/nft/themes/lightTheme.ts

@@ -22,6 +22,7 @@ export const lightTheme: Theme = {
     magicGradient: vars.color.pink400,
     placeholder: vars.color.grey300,
     lightGrayButton: vars.color.grey100,
+    loading: vars.color.grey50,
 
     // Opacities of black and white
     white95: '#EDEFF7F2',