fix(drawer): loading article too slow (#1237)

Author: mydearxym

src/containers/tool/CollectionFolder/logic.ts

@@ -236,7 +236,7 @@ export const useInit = (_store: TStore, isMobile: boolean): void => {
     store = _store
     // log('effect init')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-    load()
+    // load()
 
     if (isMobile) {
       store.changeViewTo('setter')

src/containers/unit/Footer/logic.ts

@@ -118,7 +118,7 @@ export const useInit = (_store: TStore, metric: TMetric): void => {
     store = _store
     store.mark({ metric })
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
-    getOnlineStatus()
+    // getOnlineStatus()
     checkSessionState()
 
     return () => {

src/containers/viewer/ArticleViewer/index.tsx

@@ -38,13 +38,14 @@ const ArticleViewerContainer: FC<TProps> = ({
   testid = 'article-viewer',
 }) => {
   useInit(store)
-  const { viewingArticle, loading, tab, blogRssInfoData } = store
+  const { viewingArticle, documentData, loading, tab, blogRssInfoData } = store
+  const article = Object.assign(viewingArticle, { document: documentData })
 
   return (
     <Wrapper testid={testid}>
       <CollectionFolder />
       <Viewer
-        article={viewingArticle}
+        article={article}
         loading={loading}
         tab={tab}
         blogRssInfo={blogRssInfoData}

src/containers/viewer/ArticleViewer/logic.ts

@@ -70,20 +70,24 @@ const loadArticle = (): void => {
 const markLoading = (maybe = true) => store.mark({ loading: maybe })
 
 const handleArticleRes = (article: TArticle): void => {
-  log('handleArticleRes: ', article)
-
-  const thread = article.meta.thread.toLowerCase()
-  store.setViewing({ [thread]: merge(store.viewingArticle, article) })
+  log('# handleArticleRes: ', article)
   markLoading(false)
 
-  const { id, viewerHasUpvoted, views, upvotesCount } = article
-  store.syncArticle({
-    id,
-    viewerHasUpvoted,
-    views,
-    upvotesCount,
-    viewerHasViewed: true,
-  })
+  const thread = article.meta.thread.toLowerCase()
+  const { document, ...restArticle } = article
+  store.mark({ document })
+  store.setViewing({ [thread]: merge(store.viewingArticle, restArticle) })
+
+  setTimeout(() => {
+    const { id, viewerHasUpvoted, views, upvotesCount } = article
+    store.syncArticle({
+      id,
+      viewerHasUpvoted,
+      views,
+      upvotesCount,
+      viewerHasViewed: true,
+    })
+  }, 2000)
 }
 
 const handleUovoteRes = ({ upvotesCount, meta }) => {
@@ -169,12 +173,10 @@ const ErrSolver = [
 export const useInit = (_store: TStore): void => {
   useEffect(() => {
     store = _store
-    // log('effect init')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
     loadArticle()
 
     return () => {
-      log('uninit')
       store.reset()
       sr71$.stop()
       sub$.unsubscribe()

src/containers/viewer/ArticleViewer/store.ts

@@ -14,12 +14,13 @@ import type {
   TArticleMeta,
   TThread,
   TBlogRSS,
+  TDocument,
 } from '@/spec'
 
 import uid from '@/utils/uid'
 import { markStates, toJS } from '@/utils/mobx'
 import { buildLog } from '@/utils/logger'
-import { BlogRSSInfo } from '@/model'
+import { BlogRSSInfo, Document } from '@/model'
 
 /* eslint-disable-next-line */
 const log = buildLog('S:ArticleViewer')
@@ -29,12 +30,16 @@ const ArticleViewer = T.model('ArticleViewer', {
   tab: T.optional(T.string, ''),
   // blog-spec
   blogRssInfo: T.optional(BlogRSSInfo, {}),
+  document: T.optional(Document, {}),
 })
   .views((self) => ({
     get isLogin(): boolean {
       const root = getParent(self) as TRootStore
       return root.account.isLogin
     },
+    get documentData(): TDocument {
+      return toJS(self.document)
+    },
     get accountInfo(): TAccount {
       const root = getParent(self) as TRootStore
       return root.account.accountInfo

src/stores/Model/helper/article.ts

@@ -18,7 +18,7 @@ const ArticleMeta = T.model('ArticleMeta', {
   illegalWords: T.optional(T.array(T.string), []),
 })
 
-const Document = T.model('ArticleMeta', {
+export const Document = T.model('ArticleMeta', {
   bodyHtml: T.optional(T.string, ''),
   body: T.maybeNull(T.string),
   // toc:

src/stores/Model/index.ts

@@ -35,4 +35,4 @@ export const Mention = T.model('Mention', {
   avatar: T.string,
 })
 
-export { articleFields } from './helper/article'
+export { articleFields, Document } from './helper/article'