skeleton for ad

ui/shared/DetailsSponsoredItem.tsx

@@ -3,21 +3,26 @@ import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import isSelfHosted from 'lib/isSelfHosted';
 import AdBanner from 'ui/shared/ad/AdBanner';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 
-const DetailsSponsoredItem = () => {
+interface Props {
+  isLoading?: boolean;
+}
+
+const DetailsSponsoredItem = ({ isLoading }: Props) => {
   const isMobile = useIsMobile();
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED);
 
-  if (hasAdblockCookie) {
+  if (!isSelfHosted() || hasAdblockCookie) {
     return null;
   }
 
   if (isMobile) {
     return (
       <GridItem mt={ 5 }>
-        <AdBanner justifyContent="center"/>
+        <AdBanner justifyContent="center" isLoading={ isLoading }/>
       </GridItem>
     );
   }
@@ -26,8 +31,9 @@ const DetailsSponsoredItem = () => {
     <DetailsInfoItem
       title="Sponsored"
       hint="Sponsored banner advertisement"
+      isLoading={ isLoading }
     >
-      <AdBanner/>
+      <AdBanner isLoading={ isLoading }/>
     </DetailsInfoItem>
   );
 };

ui/shared/ad/AdBanner.tsx

-import { chakra } from '@chakra-ui/react';
+import { chakra, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
@@ -9,7 +9,7 @@ import isSelfHosted from 'lib/isSelfHosted';
 import AdbutlerBanner from './AdbutlerBanner';
 import CoinzillaBanner from './CoinzillaBanner';
 
-const AdBanner = ({ className }: { className?: string }) => {
+const AdBanner = ({ className, isLoading }: { className?: string; isLoading?: boolean }) => {
   const hasAdblockCookie = cookies.get(cookies.NAMES.ADBLOCK_DETECTED, useAppContext().cookies);
 
   if (!isSelfHosted() || hasAdblockCookie) {
@@ -17,10 +17,10 @@ const AdBanner = ({ className }: { className?: string }) => {
   }
 
   if (appConfig.ad.adButlerOn) {
-    return <AdbutlerBanner className={ className }/>;
+    return <Skeleton className={ className } isLoaded={ !isLoading } borderRadius="none"><AdbutlerBanner className={ className }/></Skeleton>;
   }
 
-  return <CoinzillaBanner className={ className }/>;
+  return <Skeleton className={ className } isLoaded={ !isLoading } borderRadius="none"><CoinzillaBanner className={ className }/></Skeleton>;
 };
 
 export default chakra(AdBanner);

ui/shared/ad/CoinzillaTextAd.tsx

-import { Box, Image, Link, Text, chakra } from '@chakra-ui/react';
+import { Box, Image, Link, Text, chakra, Skeleton } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
 import { useAppContext } from 'lib/appContext';
@@ -55,7 +55,7 @@ const CoinzillaTextAd = ({ className }: {className?: string}) => {
   }
 
   if (isLoading) {
-    return <Box className={ className } h={{ base: 12, lg: 6 }}/>;
+    return <Skeleton className={ className } h={{ base: 12, lg: 6 }} maxW="1000px"/>;
   }
 
   if (!adData) {

ui/token/TokenDetails.tsx

@@ -149,7 +149,7 @@ const TokenDetails = ({ tokenQuery }: Props) => {
           </Skeleton>
         </DetailsInfoItem>
       ) }
-      <DetailsSponsoredItem/>
+      <DetailsSponsoredItem isLoading={ tokenCountersQuery.isPlaceholderData }/>
     </Grid>
   );
 };