Merge pull request #14320 from guardian/od/add-grey-background-top-above-nav

Add `top-above-nav` background placeholder

Author: deedeeh

dotcom-rendering/src/components/AdSlot.web.tsx

@@ -115,7 +115,7 @@ const topAboveNavContainerStyles = css`
 	display: block;
 `;
 
-const topAboveNavContainerVaraintStyles = css`
+const topAboveNavContainerVariantStyles = css`
 	padding-bottom: ${space[5]}px;
 	position: relative;
 	margin: 0 auto;
@@ -128,6 +128,20 @@ const topAboveNavContainerVaraintStyles = css`
 	&[top-above-nav-ad-rendered='true'] {
 		min-height: auto;
 	}
+
+	/* Ad placeholder grey box rendered while loading the ad */
+	&:not([top-above-nav-ad-rendered='true']) {
+		::before {
+			content: '';
+			position: absolute;
+			height: 250px;
+			width: 970px;
+			top: ${labelHeight}px;
+			left: 50%;
+			transform: translateX(-50%);
+			background-color: ${palette.neutral[93]};
+		}
+	}
 `;
 
 /**
@@ -600,7 +614,7 @@ export const AdSlot = ({
 				<AdSlotWrapper
 					css={
 						isIn250ReservationVariant
-							? topAboveNavContainerVaraintStyles
+							? topAboveNavContainerVariantStyles
 							: topAboveNavContainerStyles
 					}
 				>