text ad placeholder

ui/pages/Address.tsx

@@ -101,7 +101,7 @@ const AddressPageContent = () => {
 
   return (
     <Page>
-      <TextAd mb={ 6 }/>
+      { addressQuery.isLoading ? <Skeleton h={{ base: 12, lg: 6 }} mb={ 6 } w="100%" maxW="680px"/> : <TextAd mb={ 6 }/> }
       { addressQuery.isLoading ? (
         <Skeleton h={ 10 } w="260px" mb={ 6 }/>
       ) : (

ui/pages/Token.tsx

@@ -143,10 +143,13 @@ const TokenPageContent = () => {
   return (
     <Page>
       { tokenQuery.isLoading ? (
-        <Flex alignItems="center" mb={ 6 }>
-          <SkeletonCircle w={ 6 } h={ 6 } mr={ 3 }/>
-          <Skeleton w="500px" h={ 10 }/>
-        </Flex>
+        <>
+          <Skeleton h={{ base: 12, lg: 6 }} mb={ 6 } w="100%" maxW="680px"/>
+          <Flex alignItems="center" mb={ 6 }>
+            <SkeletonCircle w={ 6 } h={ 6 } mr={ 3 }/>
+            <Skeleton w="500px" h={ 10 }/>
+          </Flex>
+        </>
       ) : (
         <>
           <TextAd mb={ 6 }/>

ui/shared/ad/CoinzillaTextAd.tsx

@@ -26,6 +26,8 @@ type AdData = {
 
 const CoinzillaTextAd = ({ className }: {className?: string}) => {
   const [ adData, setAdData ] = React.useState<AdData | null>(null);
+  const [ isLoading, setIsLoading ] = React.useState(true);
+
   useEffect(() => {
     fetch('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242')
       .then(res => res.status === 200 ? res.json() : null)
@@ -34,9 +36,16 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
         if (data?.ad?.impressionUrl) {
           fetch(data.ad.impressionUrl);
         }
+      })
+      .finally(() => {
+        setIsLoading(false);
       });
   }, []);
 
+  if (isLoading) {
+    return <Box className={ className } h={{ base: 12, lg: 6 }}/>;
+  }
+
   if (!adData) {
     return null;
   }
@@ -52,7 +61,7 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
         mr={ 3 }
         display={{ base: 'none', lg: 'inline' }}
       >
-        ADs:
+        Ads:
       </Text>
       { urlObject.hostname === 'nifty.ink' ?
         <Text as="span" mr={ 1 }>🎨</Text> :

ui/tokenInstance/TokenInstanceSkeleton.tsx

@@ -7,6 +7,7 @@ import SkeletonTabs from 'ui/shared/skeletons/SkeletonTabs';
 const TokenInstanceSkeleton = () => {
   return (
     <Box>
+      <Skeleton h={{ base: 12, lg: 6 }} mb={ 6 } w="100%" maxW="680px"/>
       <Skeleton h={ 10 } maxW="400px" w="100%" mb={ 6 }/>
       <Flex align="center">
         <SkeletonCircle boxSize={ 6 } flexShrink={ 0 }/>