Merge pull request #4573 from thematters/fix/lazy-load-article-side-prod

Release: v5.1.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matters-web",
-  "version": "5.1.1",
+  "version": "5.1.2",
   "description": "codebase of Matters' website",
   "author": "Matters <[email protected]>",
   "engines": {

src/views/ArticleDetail/AuthorSidebar/Collection/index.tsx

@@ -27,7 +27,7 @@ type CollectionProps = {
   article: ArticleDetailPublicQuery['article']
 }
 
-export const Collection = ({ article, collectionId }: CollectionProps) => {
+const Collection = ({ article, collectionId }: CollectionProps) => {
   /**
    * Data Fetching
    */
@@ -132,3 +132,5 @@ export const Collection = ({ article, collectionId }: CollectionProps) => {
     </section>
   )
 }
+
+export default Collection

src/views/ArticleDetail/AuthorSidebar/RelatedArticles/index.tsx

@@ -5,8 +5,14 @@ import {
   ArticleDigestAuthorSidebar,
   ArticleDigestSidebar,
   List,
+  usePublicQuery,
 } from '~/components'
-import { ArticleDetailPublicQuery } from '~/gql/graphql'
+import {
+  ArticleDetailPublicQuery,
+  AuthorSidebarRelatedArticlesQuery,
+} from '~/gql/graphql'
+
+import { FeedPlaceholder } from '../Placeholder'
 
 type RelatedArticlesProps = {
   article: NonNullable<ArticleDetailPublicQuery['article']>
@@ -30,8 +36,29 @@ const fragments = {
   `,
 }
 
+const RELATED_ARTICLES = gql`
+  query AuthorSidebarRelatedArticles($shortHash: String) {
+    article(input: { shortHash: $shortHash }) {
+      id
+      ...AuthorSidebarRelatedArticles
+    }
+  }
+  ${fragments.article}
+`
+
 export const RelatedArticles = ({ article }: RelatedArticlesProps) => {
-  const edges = article.relatedArticles.edges
+  const { data, loading } = usePublicQuery<AuthorSidebarRelatedArticlesQuery>(
+    RELATED_ARTICLES,
+    {
+      variables: { shortHash: article.shortHash },
+    }
+  )
+
+  const edges = data?.article?.relatedArticles.edges
+
+  if (loading) {
+    return <FeedPlaceholder />
+  }
 
   if (!edges || edges.length <= 0) {
     return null

src/views/ArticleDetail/AuthorSidebar/gql.ts

@@ -1,13 +1,19 @@
 import gql from 'graphql-tag'
 
 import Author from './Author'
+import { FromAuthor } from './FromAuthor'
 
 export const fragments = {
   article: gql`
     fragment AuthorSidebarArticle on Article {
       id
+      relatedArticles(input: { first: 0 }) {
+        totalCount
+      }
       ...AuthorSidebarAuthorArticle
+      ...AuthorSidebarFromAuthor
     }
     ${Author.fragments.article}
+    ${FromAuthor.fragments.article}
   `,
 }

src/views/ArticleDetail/AuthorSidebar/index.tsx

@@ -1,10 +1,10 @@
+import dynamic from 'next/dynamic'
 import { useState } from 'react'
 
-import { useRoute } from '~/components'
+import { SpinnerBlock, useRoute } from '~/components'
 import { ArticleDetailPublicQuery } from '~/gql/graphql'
 
 import Author from './Author'
-import { Collection } from './Collection'
 import { FromAuthor } from './FromAuthor'
 import { fragments } from './gql'
 import { Placeholder } from './Placeholder'
@@ -16,16 +16,21 @@ type AuthorSidebarProps = {
   article: NonNullable<ArticleDetailPublicQuery['article']>
 }
 
+const DynamicCollection = dynamic(() => import('./Collection'), {
+  ssr: false,
+  loading: () => <SpinnerBlock />,
+})
+
 export const AuthorSidebar = ({ article }: AuthorSidebarProps) => {
   const { getQuery } = useRoute()
-  const cid = getQuery('collection')
+  const collectionId = getQuery('collection')
   const latestWorks = article.author?.latestWorks.filter((work) => {
     return work.id !== article.id
   })
   const hasFromAuthor = latestWorks && latestWorks.length > 0
   const hasRecommendation = article.relatedArticles?.totalCount > 0
   const [tab, setTab] = useState<TABS>(
-    !!cid
+    !!collectionId
       ? 'Collection'
       : hasFromAuthor
       ? 'Author'
@@ -41,8 +46,11 @@ export const AuthorSidebar = ({ article }: AuthorSidebarProps) => {
         <>
           <Tabs article={article} tab={tab} setTab={setTab} />
           <section className={styles.list}>
-            {!!cid && tab === 'Collection' && (
-              <Collection article={article} collectionId={cid} />
+            {!!collectionId && tab === 'Collection' && (
+              <DynamicCollection
+                article={article}
+                collectionId={collectionId}
+              />
             )}
             {tab === 'Author' && <FromAuthor article={article} />}
             {tab === 'Recommendation' && <RelatedArticles article={article} />}

src/views/ArticleDetail/gql.ts

@@ -3,8 +3,6 @@ import gql from 'graphql-tag'
 import { UserDigest } from '~/components/UserDigest'
 
 import { AuthorSidebar } from './AuthorSidebar'
-import { FromAuthor } from './AuthorSidebar/FromAuthor'
-import { RelatedArticles } from './AuthorSidebar/RelatedArticles'
 import MetaInfo from './MetaInfo'
 import StickyTopBanner from './StickyTopBanner'
 import { fragments as supportWidgetFragments } from './Support/SupportWidget/gql'
@@ -68,8 +66,6 @@ const articlePublicFragment = gql`
     ...AuthorSidebarArticle
     ...MetaInfoArticle
     ...TagListArticle
-    ...AuthorSidebarRelatedArticles
-    ...AuthorSidebarFromAuthor
     ...StateArticle
     ...ToolbarArticlePublic
     ...ToolbarArticlePrivate
@@ -79,8 +75,6 @@ const articlePublicFragment = gql`
   ${AuthorSidebar.fragments.article}
   ${MetaInfo.fragments.article}
   ${TagList.fragments.article}
-  ${RelatedArticles.fragments.article}
-  ${FromAuthor.fragments.article}
   ${StickyTopBanner.fragments.article}
   ${UserDigest.Rich.fragments.user.public}
   ${UserDigest.Rich.fragments.user.private}