Merge pull request #2142 from blockscout/tom2drum/issue-2137

Fix loading state of homepage on mobile

.github/workflows/deploy-review-l2.yml

@@ -13,6 +13,7 @@ on:
             - arbitrum
             - base
             - celo_alfajores
+            - garnet
             - gnosis
             - eth
             - eth_sepolia

configs/envs/.env.base

@@ -11,7 +11,7 @@ NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 
 # Instance ENVs
 NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={ "id": "728301", "width": "728", "height": "90" }
-NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "728301", "width": "320", "height": "100" }
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={ "id": "728302", "width": "320", "height": "100" }
 NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER=adbutler
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/

ui/pages/Home.tsx

@@ -2,7 +2,6 @@ import { Box, Flex, Heading } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import ChainIndicators from 'ui/home/indicators/ChainIndicators';
 import LatestBlocks from 'ui/home/LatestBlocks';
 import LatestZkEvmL2Batches from 'ui/home/LatestZkEvmL2Batches';
@@ -16,8 +15,6 @@ import WalletMenuDesktop from 'ui/snippets/walletMenu/WalletMenuDesktop';
 const rollupFeature = config.features.rollup;
 
 const Home = () => {
-  const isMobile = useIsMobile();
-
   return (
     <Box as="main">
       <Flex
@@ -53,13 +50,13 @@ const Home = () => {
           </Flex>
           <SearchBar isHomepage/>
         </Box>
-        { !isMobile && <AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden"/> }
+        <AdBanner platform="mobile" w="fit-content" flexShrink={ 0 } borderRadius="md" overflow="hidden" display={{ base: 'none', lg: 'block ' }}/>
       </Flex>
       <Flex flexDir={{ base: 'column', lg: 'row' }} columnGap={ 2 } rowGap={ 1 } mt={ 3 } _empty={{ mt: 0 }}>
         <Stats/>
         <ChainIndicators/>
       </Flex>
-      { isMobile && <AdBanner mt={ 6 } mx="auto" display="flex" justifyContent="center"/> }
+      <AdBanner mt={ 6 } mx="auto" display={{ base: 'flex', lg: 'none' }} justifyContent="center"/>
       <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 6 }>
         { rollupFeature.isEnabled && rollupFeature.type === 'zkEvm' ? <LatestZkEvmL2Batches/> : <LatestBlocks/> }
         <Box flexGrow={ 1 }>

ui/shared/ad/AdbutlerBanner.tsx

@@ -14,14 +14,27 @@ const feature = config.features.adsBanner;
 
 const AdbutlerBanner = ({ className, platform }: BannerProps) => {
   const router = useRouter();
+
   const isMobileViewport = useIsMobile();
   const isMobile = platform === 'mobile' || isMobileViewport;
 
+  // On the home page there are two ad banners
+  //  - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
+  //  - another - a regular ad banner, should be hidden on desktop devices
+  // The Adbutler provider doesn't work properly with 2 banners with the same id on the page
+  // So we use this flag to skip ad initialization for the first home page banner on mobile devices
+  // For all other pages this is not the case
+  const isHidden = (isMobileViewport && platform === 'mobile');
+
   React.useEffect(() => {
     if (!('adButler' in feature)) {
       return;
     }
 
+    if (isHidden) {
+      return;
+    }
+
     if (isBrowser() && window.AdButler) {
       const abkw = window.abkw || '';
       if (!window.AdButler.ads) {
@@ -47,7 +60,7 @@ const AdbutlerBanner = ({ className, platform }: BannerProps) => {
         );
       }, opt: { place: plc++, keywords: abkw, domain: 'servedbyadbutler.com', click: 'CLICK_MACRO_PLACEHOLDER' } });
     }
-  }, [ router, isMobile ]);
+  }, [ router, isMobile, isHidden ]);
 
   if (!('adButler' in feature)) {
     return null;
@@ -73,11 +86,17 @@ const AdbutlerBanner = ({ className, platform }: BannerProps) => {
     }
   })() ?? { width: '0', height: '0' };
 
+  const getElementId = (id: string) => id + (platform ? `_${ platform }` : '');
+
   return (
-    <Flex className={ className } id="adBanner" h={ height } w={ width }>
-      <Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
-      <Script strategy="lazyOnload" id="ad-butler-2">{ placeAd(platform) }</Script>
-      <div id="ad-banner"></div>
+    <Flex className={ className } id={ getElementId('adBanner') } h={ height } w={ width }>
+      { !isHidden && (
+        <>
+          <Script strategy="lazyOnload" id="ad-butler-1">{ connectAdbutler }</Script>
+          <Script strategy="lazyOnload" id="ad-butler-2">{ placeAd(platform) }</Script>
+          <div id="ad-banner"></div>
+        </>
+      ) }
     </Flex>
   );
 };

ui/shared/ad/CoinzillaBanner.tsx

@@ -4,10 +4,20 @@ import React from 'react';
 
 import type { BannerProps } from './types';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
 
 const CoinzillaBanner = ({ className, platform }: BannerProps) => {
   const isInBrowser = isBrowser();
+  const isMobileViewport = useIsMobile();
+
+  // On the home page there are two ad banners
+  //  - one in the stats section with prop "platform === mobile", should be hidden on mobile devices
+  //  - another - a regular ad banner, should be hidden on desktop devices
+  // The Coinzilla provider doesn't work properly with 2 banners with the same id on the page
+  // So we use this flag to skip ad initialization for the first home page banner on mobile devices
+  // For all other pages this is not the case
+  const isHidden = (isMobileViewport && platform === 'mobile');
 
   const { width, height } = (() => {
     switch (platform) {
@@ -22,7 +32,7 @@ const CoinzillaBanner = ({ className, platform }: BannerProps) => {
   })();
 
   React.useEffect(() => {
-    if (isInBrowser) {
+    if (isInBrowser && !isHidden) {
       window.coinzilla_display = window.coinzilla_display || [];
       const cDisplayPreferences = {
         zone: '26660bf627543e46851',
@@ -31,7 +41,7 @@ const CoinzillaBanner = ({ className, platform }: BannerProps) => {
       };
       window.coinzilla_display.push(cDisplayPreferences);
     }
-  }, [ height, isInBrowser, width ]);
+  }, [ height, isInBrowser, isHidden, width ]);
 
   return (
     <Flex
@@ -40,8 +50,12 @@ const CoinzillaBanner = ({ className, platform }: BannerProps) => {
       h={ height ? `${ height }px` : { base: '100px', lg: '90px' } }
       w={ width ? `${ width }px` : undefined }
     >
-      <Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
-      <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
+      { !isHidden && (
+        <>
+          <Script strategy="lazyOnload" src="https://coinzillatag.com/lib/display.js"/>
+          <div className="coinzilla" data-zone="C-26660bf627543e46851"></div>
+        </>
+      ) }
     </Flex>
   );
 };

ui/shared/layout/components/Container.tsx

@@ -8,7 +8,7 @@ interface Props {
 
 const Container = ({ children, className }: Props) => {
   return (
-    <Box className={ className } minWidth={{ base: '100vw', lg: 'auto' }}>
+    <Box className={ className } minWidth={{ base: '100vw', lg: 'fit-content' }}>
       { children }
     </Box>
   );