Merge pull request #913 from blockscout/feat/text-ad-skeleton

bugfix: skeleton for text ads

ui/shared/Page/PageTitle.tsx

@@ -80,7 +80,7 @@ const PageTitle = ({ title, contentAfter, withTextAd, backLink, className, isLoa
         { afterTitle }
       </Box>
       { contentAfter }
-      { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto"/> }
+      { withTextAd && <TextAd order={{ base: -1, lg: 100 }} mb={{ base: 6, lg: 0 }} ml="auto" w={{ base: '100%', lg: 'auto' }}/> }
     </Flex>
   );
 };

ui/shared/ad/CoinzillaTextAd.tsx

@@ -45,6 +45,7 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
           }
         })
         .finally(() => {
+          // setAdData(MOCK);
           setIsLoading(false);
         });
     }
@@ -55,7 +56,16 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
   }
 
   if (isLoading) {
-    return <Skeleton className={ className } h={{ base: 12, lg: 6 }} w={{ base: '100%', lg: 'auto' }} flexGrow={ 1 } maxW="1000px" display="inline-block"/>;
+    return (
+      <Skeleton
+        className={ className }
+        h={{ base: 12, lg: 6 }}
+        w="100%"
+        flexGrow={ 1 }
+        maxW="800px"
+        display="block"
+      />
+    );
   }
 
   if (!adData) {

ui/snippets/searchBar/SearchBarSuggest.tsx

-import { Text } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import _uniqBy from 'lodash/uniqBy';
 import React from 'react';
@@ -98,7 +98,11 @@ const SearchBarSuggest = ({ query, redirectCheckQuery, searchTerm, onItemClick }
 
   return (
     <>
-      { !isMobile && <TextAd pb={ 4 } mb={ 5 } borderColor="divider" borderBottomWidth="1px"/> }
+      { !isMobile && (
+        <Box pb={ 4 } mb={ 5 } borderColor="divider" borderBottomWidth="1px" _empty={{ display: 'none' }}>
+          <TextAd/>
+        </Box>
+      ) }
       { content }
     </>
   );