Release: v5.1.1

src/components/Billboard/index.tsx

@@ -7,7 +7,6 @@ import {
   BillboardDialog,
   BillboardExposureTracker,
   Icon,
-  Spinner,
   TextIcon,
 } from '~/components'
 
@@ -34,7 +33,7 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
     cacheTime: 60_000,
   })
 
-  if (!id || isError || !data || !data.contentURI) {
+  if (!id || isError || isLoading || !data || !data.contentURI) {
     return null
   }
 
@@ -43,43 +42,40 @@ export const Billboard = ({ tokenId, type }: BillboardProps) => {
       {({ openDialog: openBillboardDialog }) => {
         return (
           <div className={styles.billboard}>
-            {isLoading && <Spinner />}
-            {!isLoading && (
-              <>
-                <a
-                  href={data.redirectURI}
-                  target="_blank"
-                  onClick={() =>
-                    analytics.trackEvent('click_billboard', {
-                      id,
-                      type,
-                      target: data.redirectURI,
-                    })
-                  }
-                >
-                  <img src={data.contentURI} alt="ad" />
-                </a>
-                <button
-                  className={styles.button}
-                  type="button"
-                  aria-label={intl.formatMessage({
-                    defaultMessage: "What's this?",
-                    id: '4wOWfp',
-                    description: 'src/components/Billboard/index.tsx',
-                  })}
-                  onClick={openBillboardDialog}
-                >
-                  <TextIcon icon={<Icon icon={IconInfo} />} size={12}>
-                    <FormattedMessage
-                      defaultMessage="What's this?"
-                      id="4wOWfp"
-                      description="src/components/Billboard/index.tsx"
-                    />
-                  </TextIcon>
-                </button>
-                <BillboardExposureTracker id={id} type={type} />
-              </>
-            )}
+            <a
+              href={data.redirectURI}
+              target="_blank"
+              onClick={() =>
+                analytics.trackEvent('click_billboard', {
+                  id,
+                  type,
+                  target: data.redirectURI,
+                })
+              }
+            >
+              <img src={data.contentURI} alt="ad" />
+            </a>
+
+            <button
+              className={styles.button}
+              type="button"
+              aria-label={intl.formatMessage({
+                defaultMessage: "What's this?",
+                id: '4wOWfp',
+                description: 'src/components/Billboard/index.tsx',
+              })}
+              onClick={openBillboardDialog}
+            >
+              <TextIcon icon={<Icon icon={IconInfo} />} size={12}>
+                <FormattedMessage
+                  defaultMessage="What's this?"
+                  id="4wOWfp"
+                  description="src/components/Billboard/index.tsx"
+                />
+              </TextIcon>
+            </button>
+
+            <BillboardExposureTracker id={id} type={type} />
           </div>
         )
       }}

src/components/Billboard/styles.module.css

@@ -1,20 +1,34 @@
 .billboard {
-  display: block;
-  max-width: 21.4375rem;
+  max-width: 100%;
+
+  @media (--sm-up) {
+    max-width: 50%;
+  }
+
+  @media (--md-up) {
+    max-width: 100%;
+  }
 
   & a {
     @mixin flex-center-all;
 
-    line-height: 0;
+    position: relative;
+
+    &::after {
+      display: block;
+      padding-bottom: 56.06%;
+      content: '';
+    }
 
     & img {
-      width: 100%;
-      max-height: 10.5rem;
+      @mixin object-fit-cover;
+
       border-radius: 1.25rem;
     }
   }
 
   & .button {
+    margin-top: var(--sp8);
     color: var(--color-grey);
   }
 }

src/views/Home/Sidebar/Authors/index.tsx

@@ -31,7 +31,7 @@ const Authors = () => {
   /**
    * Data Fetching
    */
-  const perPage = 5
+  const perPage = 4
   const randomMaxSize = 50
   const { data, loading, error, refetch } = usePublicQuery<SidebarAuthorsQuery>(
     SIDEBAR_AUTHORS,

src/views/Home/Sidebar/Tags/index.tsx

@@ -52,7 +52,7 @@ const Tags = () => {
     { variables: { id: 'local' } }
   )
   const lastRandom = lastFetchRandom?.lastFetchRandom.sidebarTags // last Random
-  const perPage = 6
+  const perPage = 4
   const randomMaxSize = 50
   const { data, loading, error, refetch } =
     usePublicQuery<SidebarTagsPublicQuery>(

src/views/Me/History/Comments/index.tsx

@@ -1,3 +1,4 @@
+import { useQuery } from '@apollo/react-hooks'
 import _flatten from 'lodash/flatten'
 import { useContext } from 'react'
 import { useIntl } from 'react-intl'
@@ -17,7 +18,6 @@ import {
   List,
   QueryError,
   SpinnerBlock,
-  usePublicQuery,
   ViewerContext,
 } from '~/components'
 import { MeCommentsQuery } from '~/gql/graphql'
@@ -48,12 +48,9 @@ const Comments = () => {
   /**
    * Data Fetching
    */
-  // public data
-  const { data, loading, error, fetchMore } = usePublicQuery<MeCommentsQuery>(
+  const { data, loading, error, fetchMore } = useQuery<MeCommentsQuery>(
     ME_COMMENTS,
-    {
-      variables: { id: viewer?.id },
-    }
+    { variables: { id: viewer?.id } }
   )
 
   // pagination