fix(snow-tab): bad performance when switch with post thread (#1247)

mydearxym · web-flow · commit 6a18b5b0e967 · 2021-12-29T21:46:43.000+08:00
* chore: wip

* chore(deploy): bump version to v2.1.4

* fix(slow-tab): use dynamic loader to avoid slow list render

* chore(deploy): bump version to v2.1.5
diff --git a/config/config.json b/config/config.json
@@ -59,7 +59,7 @@
   "//--- contact configs ---//": "",
   "EMAIL_SUPPORT": "coderplanets@outlook.com",
   "// GRAPHQL_ENDPOINT": "https://api.coderplanets.com/graphiql",
-  "BUILD_VERSION": "v2.1.3",
+  "BUILD_VERSION": "v2.1.5",
   "// 1000 * 60 * 10 = 10 mins": "",
   "SSR_CACHE_TIME": 60000
 }
diff --git a/deploy/production/web.tar.gz b/deploy/production/web.tar.gz
diff --git a/src/containers/content/CommunityContent/ThreadContent.tsx b/src/containers/content/CommunityContent/ThreadContent.tsx
@@ -14,11 +14,7 @@ type TProps = {
 }
 
 const ThreadContent: FC<TProps> = ({ thread }) => {
-  console.log('# thread: ', thread)
-
   switch (thread) {
-    // case THREAD.REPO:
-    // return <ReposThread />
     case THREAD.KANBAN: {
       return <WipThread title="看板" />
     }
diff --git a/src/containers/content/CommunityContent/logic.ts b/src/containers/content/CommunityContent/logic.ts
@@ -33,9 +33,9 @@ const tabOnChange = (activeThread: TThread): void => {
   const subPath =
     activeThread !== ARTICLE_THREAD.POST ? plural(activeThread) : ''
 
-  store.markRoute({ mainPath, subPath })
   // store.setViewing({ activeThread })
   store.setCurThread(activeThread)
+  store.markRoute({ mainPath, subPath })
 }
 
 // ###############################
diff --git a/src/containers/thread/ArticlesThread/index.tsx b/src/containers/thread/ArticlesThread/index.tsx
@@ -61,7 +61,7 @@ const ArticlesThreadContainer: FC<TProps> = ({ articlesThread: store }) => {
     ? MobileCardsMainWrapper
     : MainWrapper
 
-  console.log('# got pagedArticlesData: ', pagedArticlesData)
+  log('# got pagedArticlesData: ', pagedArticlesData)
 
   return (
     <Wrapper>
diff --git a/src/containers/thread/ArticlesThread/logic.ts b/src/containers/thread/ArticlesThread/logic.ts
@@ -113,7 +113,6 @@ const DataSolver = [
   {
     match: asyncRes(EVENT.ARTICLE_THREAD_CHANGE),
     action: () => {
-      log('EVENT.ARTICLE_THREAD_CHANGE')
       // 之前如果请求过，那么 GraphQL 会被缓存，不必重复请求
       if (store.isEmpty) loadArticles()
     },
@@ -169,9 +168,10 @@ const ErrSolver = [
 // ###############################
 // init & uninit
 // ###############################
-export const useInit = (_store: TStore): void =>
+export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
+    store.afterInitLoading()
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 
     // if (store.isEmpty) loadArticles()
@@ -183,3 +183,4 @@ export const useInit = (_store: TStore): void =>
       sub$.unsubscribe()
     }
   }, [_store])
+}
diff --git a/src/containers/thread/ArticlesThread/store.ts b/src/containers/thread/ArticlesThread/store.ts
@@ -42,7 +42,7 @@ const ArticlesThread = T.model('ArticlesThread', {
   filters: T.optional(ArticlesFilter, {}),
   resState: T.optional(
     T.enumeration('resState', values(TYPE.RES_STATE)),
-    TYPE.RES_STATE.DONE,
+    TYPE.RES_STATE.LOADING,
   ),
 })
   .views((self) => ({
@@ -109,9 +109,21 @@ const ArticlesThread = T.model('ArticlesThread', {
     },
   }))
   .actions((self) => ({
+    afterInitLoading(): void {
+      const slf = self as TStore
+      const { totalCount } = slf.pagedArticlesData
+
+      console.log('totalCount -> ', totalCount)
+
+      if (totalCount === 0) {
+        self.resState = TYPE.RES_STATE.EMPTY
+      } else {
+        self.resState = TYPE.RES_STATE.DONE
+      }
+    },
     // the args pass to server when load articles
     getLoadArgs(page = 1): Record<string, unknown> {
-      // self.resState = TYPE.RES_STATE.LOADING
+      self.resState = TYPE.RES_STATE.LOADING
 
       const root = getParent(self) as TRootStore
       return root.getPagedArticleArgs(page, self.filtersData)
@@ -121,9 +133,9 @@ const ArticlesThread = T.model('ArticlesThread', {
       const pagedData = values(res)[0] as TPagedArticles
 
       if (pagedData.totalCount === 0) {
-        // slf.resState = TYPE.RES_STATE.EMPTY
+        slf.resState = TYPE.RES_STATE.EMPTY
       } else {
-        // slf.resState = TYPE.RES_STATE.DONE
+        slf.resState = TYPE.RES_STATE.DONE
       }
 
       slf.mark(res)
diff --git a/src/widgets/PagedArticles/ArticleList.tsx b/src/widgets/PagedArticles/ArticleList.tsx
@@ -20,7 +20,11 @@ const ArticleList = (props) => {
     return <LavaLampLoading top={20} left={30} />
   }
 
-  if (resState === TYPE.RES_STATE.EMPTY) {
+  // 加入 length 的判断是因为 Graphql 客户端如果有缓存的话会导致 RES_STATE 没有更新（因为没有请求）
+  if (
+    (resState === TYPE.RES_STATE.EMPTY && entries.length === 0) ||
+    (resState === TYPE.RES_STATE.DONE && entries.length === 0)
+  ) {
     return <EmptyThread thread={thread} />
   }
 
@@ -59,6 +63,7 @@ const ArticleList = (props) => {
 
     default:
       // common post
+      // return <h3>PostItems</h3>
       return (
         <Fragment>
           {entries.map((entry) => (
diff --git a/src/widgets/PagedArticles/index.tsx b/src/widgets/PagedArticles/index.tsx
@@ -59,11 +59,10 @@ const PagedArticles: FC<TProps> = ({
         {...pagi}
         onChange={(page) => send(EVENT.REFRESH_ARTICLES, { page })}
         margin={{ bottom: '60px', top: '60px' }}
-      >
-        {/* <CommunityRecommends /> */}
-      </Pagi>
+      />
     </Fragment>
   )
 }
 
+/* <CommunityRecommends /> */
 export default memo(PagedArticles)
diff --git a/src/widgets/PostItem/DesktopView/Body.tsx b/src/widgets/PostItem/DesktopView/Body.tsx
@@ -1,4 +1,5 @@
 import { FC, Fragment } from 'react'
+import dynamic from 'next/dynamic'
 import TimeAgo from 'timeago-react'
 
 import Link from 'next/link'
@@ -9,11 +10,11 @@ import { send, changeToCommunity } from '@/utils/helper'
 
 import { SpaceGrow } from '@/widgets/Common'
 import DigestSentence from '@/widgets/DigestSentence'
-import CommunityCard from '@/widgets/Cards/CommunityCard'
-import UserCard from '@/widgets/Cards/UserCard'
+// import CommunityCard from '@/widgets/Cards/CommunityCard'
+// import UserCard from '@/widgets/Cards/UserCard'
 import Tooltip from '@/widgets/Tooltip'
 
-import ActiveBadge from './ActiveBadge'
+// import ActiveBadge from './ActiveBadge'
 
 import {
   Wrapper,
@@ -28,6 +29,18 @@ import {
   ViewsIcon,
 } from '../styles/desktop_view/body'
 
+const CommunityCard = dynamic(() => import('@/widgets/Cards/CommunityCard'), {
+  ssr: false,
+})
+
+const UserCard = dynamic(() => import('@/widgets/Cards/UserCard'), {
+  ssr: false,
+})
+
+const ActiveBadge = dynamic(() => import('./ActiveBadge'), {
+  ssr: false,
+})
+
 type TProps = {
   curCommunity: TCommunity | null
   item: TPost
diff --git a/src/widgets/PostItem/DesktopView/Header.tsx b/src/widgets/PostItem/DesktopView/Header.tsx
@@ -1,12 +1,13 @@
 import { FC } from 'react'
 import Link from 'next/link'
+import dynamic from 'next/dynamic'
 
 import type { TPost } from '@/spec'
 import { ARTICLE_THREAD } from '@/constant'
 import { parseDomain } from '@/utils/route'
 
 import AvatarsRow from '@/widgets/AvatarsRow'
-import TagsList from '@/widgets/TagsList'
+// import TagsList from '@/widgets/TagsList'
 
 import {
   Wrapper,
@@ -18,6 +19,14 @@ import {
   Participants,
 } from '../styles/desktop_view/header'
 
+// const AvatarsRow = dynamic(() => import('@/widgets/AvatarsRow'), {
+//   ssr: false,
+// })
+
+const TagsList = dynamic(() => import('@/widgets/TagsList'), {
+  ssr: false,
+})
+
 type TProps = {
   item: TPost
 }
@@ -35,6 +44,7 @@ const Header: FC<TProps> = ({ item }) => {
             <span style={{ marginLeft: 9 }}>{parseDomain(item.linkAddr)}</span>
           </TitleLink>
         )}
+
         <TagListWrapper>
           <TagsList items={item.articleTags} />
         </TagListWrapper>
diff --git a/src/widgets/PostItem/DesktopView/index.tsx b/src/widgets/PostItem/DesktopView/index.tsx
@@ -1,19 +1,21 @@
-import { FC, Fragment, memo } from 'react'
+import { FC, Fragment, memo, useEffect, useState } from 'react'
+import dynamic from 'next/dynamic'
 
 import type { TCommunity, TPost } from '@/spec'
 import { UPVOTE_LAYOUT } from '@/constant'
 
 import { upvoteOnArticleList } from '@/utils/helper'
 import TheAvatar from '@/widgets/TheAvatar'
-import Upvote from '@/widgets/Upvote'
-
-import { ArticleReadLabel, ArticlePinLabel } from '@/widgets/dynamic'
 
 import Header from './Header'
 import Body from './Body'
 
 import { AvatarWrapper, UpvoteWrapper, Main } from '../styles/desktop_view'
 
+let Upvote = null
+let ArticleReadLabel = null
+let ArticlePinLabel = null
+
 type TProps = {
   curCommunity: TCommunity | null
   entry: TPost
@@ -23,21 +25,44 @@ type TProps = {
 }
 
 const DigestView: FC<TProps> = ({ curCommunity, entry }) => {
+  const [loaded, setLoaded] = useState(false)
+
+  // 如果同步渲染 Upvote, ArticleReadLabel, ArticlePinLabel 等组件会导致难以忍受的卡顿
+  // 尤其是在 Tab 切换的时候。手机端因为目前没有这些组件，性能暂无问题。
+  // 本不应该存在的无聊问题，蛋疼的解决办法，
+  useEffect(() => {
+    const cfg = { ssr: false }
+
+    Upvote = dynamic(() => import('@/widgets/Upvote'), cfg)
+    ArticleReadLabel = dynamic(() => import('@/widgets/ArticleReadLabel'), cfg)
+    ArticlePinLabel = dynamic(() => import('@/widgets/ArticlePinLabel'), cfg)
+
+    setTimeout(() => {
+      setLoaded(true)
+    }, 200)
+  }, [])
+
   return (
     <Fragment>
-      <ArticleReadLabel entry={entry} />
-      <ArticlePinLabel entry={entry} />
+      {loaded && (
+        <Fragment>
+          <ArticleReadLabel entry={entry} />
+          <ArticlePinLabel entry={entry} />
+        </Fragment>
+      )}
       <AvatarWrapper>
         <TheAvatar user={entry.author} />
         <UpvoteWrapper>
-          <Upvote
-            type={UPVOTE_LAYOUT.POST_LIST}
-            count={entry.upvotesCount}
-            viewerHasUpvoted={entry.viewerHasUpvoted}
-            onAction={(viewerHasUpvoted) =>
-              upvoteOnArticleList(entry, viewerHasUpvoted)
-            }
-          />
+          {loaded && (
+            <Upvote
+              type={UPVOTE_LAYOUT.POST_LIST}
+              count={entry.upvotesCount}
+              viewerHasUpvoted={entry.viewerHasUpvoted}
+              onAction={(viewerHasUpvoted) =>
+                upvoteOnArticleList(entry, viewerHasUpvoted)
+              }
+            />
+          )}
         </UpvoteWrapper>
       </AvatarWrapper>
       <Main>
diff --git a/src/widgets/TheAvatar/PostItemAvatar.tsx b/src/widgets/TheAvatar/PostItemAvatar.tsx
@@ -19,10 +19,14 @@ type TProps = {
 }
 
 const PostItemAvatar: FC<TProps> = ({ user, onSelect }) => {
-  const quoteLogin = 'laury2'
+  // const quoteLogin = 'laury2'
   return (
     <Wrapper onClick={() => onSelect(user)}>
-      {user.login === quoteLogin ? (
+      <Avatar
+        src={user.avatar}
+        fallback={<ImgFallback user={user} size={30} top={-2} left={0} />}
+      />
+      {/* {user.login === quoteLogin ? (
         <QuoteAvatar
           src={user.avatar}
           fallback={
@@ -34,11 +38,11 @@ const PostItemAvatar: FC<TProps> = ({ user, onSelect }) => {
           src={user.avatar}
           fallback={<ImgFallback user={user} size={30} top={-2} left={0} />}
         />
-      )}
-      {user.login === quoteLogin ? <QuoteShadow /> : <InnerShadow />}
-      {user.login === quoteLogin && (
+      )} */}
+      {/* {user.login === quoteLogin ? <QuoteShadow /> : <InnerShadow />} */}
+      {/* {user.login === quoteLogin && (
         <MaskIcon src={`${ICON}/user/mute-mask.svg`} />
-      )}
+      )} */}
     </Wrapper>
   )
 }

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@`
`59`	`59`	`"//--- contact configs ---//": "",`
`60`	`60`	`"EMAIL_SUPPORT": "coderplanets@outlook.com",`
`61`	`61`	`"// GRAPHQL_ENDPOINT": "https://api.coderplanets.com/graphiql",`
`62`		`- "BUILD_VERSION": "v2.1.3",`
	`62`	`+ "BUILD_VERSION": "v2.1.5",`
`63`	`63`	`"// 1000 * 60 * 10 = 10 mins": "",`
`64`	`64`	`"SSR_CACHE_TIME": 60000`
`65`	`65`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,11 +14,7 @@ type TProps = {`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`const ThreadContent: FC<TProps> = ({ thread }) => {`
`17`		`- console.log('# thread: ', thread)`
`18`		`-`
`19`	`17`	`switch (thread) {`
`20`		`- // case THREAD.REPO:`
`21`		`- // return <ReposThread />`
`22`	`18`	`case THREAD.KANBAN: {`
`23`	`19`	`return <WipThread title="看板" />`
`24`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -33,9 +33,9 @@ const tabOnChange = (activeThread: TThread): void => {`
`33`	`33`	`const subPath =`
`34`	`34`	`activeThread !== ARTICLE_THREAD.POST ? plural(activeThread) : ''`
`35`	`35`
`36`		`- store.markRoute({ mainPath, subPath })`
`37`	`36`	`// store.setViewing({ activeThread })`
`38`	`37`	`store.setCurThread(activeThread)`
	`38`	`+ store.markRoute({ mainPath, subPath })`
`39`	`39`	`}`
`40`	`40`
`41`	`41`	`// ###############################`
Original file line number	Diff line number	Diff line change
`@@ -59,11 +59,10 @@ const PagedArticles: FC<TProps> = ({`
`59`	`59`	`{...pagi}`
`60`	`60`	`onChange={(page) => send(EVENT.REFRESH_ARTICLES, { page })}`
`61`	`61`	`margin={{ bottom: '60px', top: '60px' }}`
`62`		`- >`
`63`		`- {/* <CommunityRecommends /> */}`
`64`		`- </Pagi>`
	`62`	`+ />`
`65`	`63`	`</Fragment>`
`66`	`64`	`)`
`67`	`65`	`}`
`68`	`66`
	`67`	`+/* <CommunityRecommends /> */`
`69`	`68`	`export default memo(PagedArticles)`