display a placeholder while loading the ad

Author: medyo

src/assets/App.css

@@ -973,15 +973,16 @@ Producthunt item
   border-radius: 4px;
 }
 .adCardPlaceholder {
-  max-width: 300px;
+  width: 300px;
   column-gap: 16px;
   display: flex;
   flex-direction: row;
+  margin:0 auto;
 }
 .adCardPlaceholder .image {
   background: var(--placeholder-background-color);
-  flex: 0 0 120px;
-  height: 90px 
+  flex: 0 0 130px;
+  height: 100px 
 }
 
 .floatingFilter {

src/features/ads/components/BannerAd.css

@@ -24,25 +24,25 @@
   display: block;
   overflow: hidden;
 }
-#bannerads .carbon-wrap {
+#bannerads .wrap {
   display: flex;
 }
-#bannerads .carbon-img {
+#bannerads .img {
   display: block;
   margin: 0;
   line-height: 1;
 }
-#bannerads .carbon-img img {
+#bannerads .img img {
   display: block;
 }
-#bannerads .carbon-text {
+#bannerads .text {
   font-size: 13px;
   padding: 10px;
   margin-bottom: 16px;
   line-height: 1.5;
   text-align: left;
 }
-#bannerads .carbon-poweredby {
+#bannerads .poweredby {
   display: block;
   padding: 6px 8px;
   background: inherit;

src/features/ads/components/BannerAd.tsx

@@ -1,14 +1,23 @@
 import './BannerAd.css'
 import { useGetAd } from '../api/getAd'
+import { AdPlaceholder } from 'src/components/placeholders'
 
 export const BannerAd = () => {
-  const { data: ad, isError } = useGetAd({
+  const {
+    data: ad,
+    isLoading,
+    isError,
+  } = useGetAd({
     config: {
       cacheTime: 0,
       staleTime: 0,
-    }
+    },
   })
 
+  if (isLoading) {
+    return <AdPlaceholder />
+  }
+
   if (isError || !ad) {
     return null
   }