From a61bdc9caaf860d83ae79c0578f644b31c0d989a Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Wed, 14 Jun 2023 17:56:46 +0800
Subject: [PATCH] fix: page always loading

Signed-off-by: Innei <tukon479@gmail.com>
---
 next.d.ts                                     |  8 --
 src/components/app/Suspense/index.tsx         |  6 ++
 .../common/KamiMarkdown/MarkdownToc.tsx       | 19 +++--
 src/components/layouts/NoteLayout.tsx         | 18 +++--
 src/components/layouts/SiteLayout/index.tsx   | 14 ++--
 src/pages/[page]/index.tsx                    | 28 ++++---
 src/pages/notes/[id].tsx                      | 76 ++++++++++++-------
 src/pages/posts/[category]/[slug].tsx         | 44 +++++------
 8 files changed, 123 insertions(+), 90 deletions(-)
 delete mode 100644 next.d.ts
 create mode 100644 src/components/app/Suspense/index.tsx

diff --git a/next.d.ts b/next.d.ts
deleted file mode 100644
index 6ada36ca0..000000000
--- a/next.d.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import type { DynamicOptions } from 'next/dynamic'
-
-declare module 'next/dynamic' {
-  export default function dynamic<P = {}>(
-    fc: () => Promise<P>,
-    options?: DynamicOptions<P>,
-  ): P
-}
diff --git a/src/components/app/Suspense/index.tsx b/src/components/app/Suspense/index.tsx
new file mode 100644
index 000000000..b53d5dc40
--- /dev/null
+++ b/src/components/app/Suspense/index.tsx
@@ -0,0 +1,6 @@
+import type { FC } from 'react'
+import { Suspense as ReactSuspense } from 'react'
+
+export const Suspense: FC = (props) => {
+  return <ReactSuspense fallback={null}>{props.children}</ReactSuspense>
+}
diff --git a/src/components/common/KamiMarkdown/MarkdownToc.tsx b/src/components/common/KamiMarkdown/MarkdownToc.tsx
index 69443c7ca..85a370dad 100644
--- a/src/components/common/KamiMarkdown/MarkdownToc.tsx
+++ b/src/components/common/KamiMarkdown/MarkdownToc.tsx
@@ -1,20 +1,19 @@
-import dynamic from 'next/dynamic'
 import type { FC } from 'react'
-import { memo, useEffect } from 'react'
+import { lazy, memo, useEffect } from 'react'
 
 import { useActionStore } from '~/atoms/action'
 import { useAppStore } from '~/atoms/app'
+import { Suspense } from '~/components/app/Suspense'
 import { FloatPopover } from '~/components/ui/FloatPopover'
 import { FluentList16Filled } from '~/components/ui/Icons/shared'
 import { useModalStack } from '~/components/ui/Modal'
 import type { TocProps } from '~/components/widgets/Toc'
 import { useDetectIsNarrowThanLaptop } from '~/hooks/ui/use-viewport'
 
-const Toc = dynamic(
-  () => import('~/components/widgets/Toc').then((m) => m.Toc),
-  {
-    ssr: false,
-  },
+const Toc = lazy(() =>
+  import('~/components/widgets/Toc').then((m) => ({
+    default: m.Toc,
+  })),
 )
 
 export const MarkdownToc: FC<TocProps> = memo((props) => {
@@ -62,5 +61,9 @@ export const MarkdownToc: FC<TocProps> = memo((props) => {
       actionStore.removeActionById(id)
     }
   }, [isNarrowThanLaptop, isMobile, present, props])
-  return !isNarrowThanLaptop ? <Toc {...props} /> : null
+  return !isNarrowThanLaptop ? (
+    <Suspense>
+      <Toc {...props} />
+    </Suspense>
+  ) : null
 })
diff --git a/src/components/layouts/NoteLayout.tsx b/src/components/layouts/NoteLayout.tsx
index d4a981d36..f6eaa4cb4 100644
--- a/src/components/layouts/NoteLayout.tsx
+++ b/src/components/layouts/NoteLayout.tsx
@@ -1,9 +1,8 @@
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { motion, useAnimationControls } from 'framer-motion'
-import dynamic from 'next/dynamic'
 import type { ReactNode } from 'react'
-import { forwardRef, useCallback, useEffect } from 'react'
+import { forwardRef, lazy, useCallback, useEffect } from 'react'
 import { shallow } from 'zustand/shallow'
 
 import { useAppStore } from '~/atoms/app'
@@ -19,14 +18,15 @@ import { microReboundPreset } from '~/constants/spring'
 import { springScrollToElement } from '~/utils/spring'
 import { resolveUrl } from '~/utils/utils'
 
+import { Suspense } from '../app/Suspense'
 import { IconTransition } from '../common/IconTransition'
 import { AnimateChangeInHeight } from '../ui/AnimateChangeInHeight'
 import { Banner } from '../ui/Banner'
 
-const NoteTimelineList = dynamic(() =>
-  import('~/components/in-page/Note/NoteTimelineList').then(
-    (mo) => mo.NoteTimelineList,
-  ),
+const NoteTimelineList = lazy(() =>
+  import('~/components/in-page/Note/NoteTimelineList').then((mo) => ({
+    default: mo.NoteTimelineList,
+  })),
 )
 
 const bannerClassNames = {
@@ -221,7 +221,11 @@ export const NoteLayout = forwardRef<HTMLElement, NoteLayoutProps>(
           </div>
         </motion.div>
 
-        {!isPreview && <NoteTimelineList noteId={id} />}
+        {!isPreview && (
+          <Suspense>
+            <NoteTimelineList noteId={id} />
+          </Suspense>
+        )}
       </main>
     )
   },
diff --git a/src/components/layouts/SiteLayout/index.tsx b/src/components/layouts/SiteLayout/index.tsx
index 723aa36cf..256a670e5 100644
--- a/src/components/layouts/SiteLayout/index.tsx
+++ b/src/components/layouts/SiteLayout/index.tsx
@@ -1,7 +1,6 @@
 import type { FC } from 'react'
 import React, {
   memo,
-  Suspense,
   useCallback,
   useEffect,
   useId,
@@ -13,6 +12,7 @@ import { ShortcutProvider } from 'react-shortcut-guide'
 
 import { useActionStore } from '~/atoms/action'
 import { useAppStore } from '~/atoms/app'
+import { Suspense } from '~/components/app/Suspense'
 import { BiMoonStarsFill, PhSunBold } from '~/components/ui/Icons/layout'
 import { ModalStackProvider } from '~/components/ui/Modal'
 import { TrackerAction } from '~/constants/tracker'
@@ -134,7 +134,7 @@ export const SiteLayout: FC = memo(({ children }) => {
         <div className="bg absolute inset-0 transform-gpu" />
       </div>
 
-      <Suspense fallback={null}>
+      <Suspense>
         <Header />
       </Suspense>
 
@@ -155,19 +155,19 @@ export const SiteLayout: FC = memo(({ children }) => {
         }
       />
 
-      <Suspense fallback={null}>
+      <Suspense>
         <Footer />
       </Suspense>
 
-      <Suspense fallback={null}>
+      <Suspense>
         <MusicMiniPlayerStoreControlled />
       </Suspense>
 
-      <Suspense fallback={null}>
+      <Suspense>
         {!isNarrowThanLaptop && <LampSwitch onClick={handleChangeColorMode} />}
       </Suspense>
 
-      <Suspense fallback={null}>
+      <Suspense>
         <ColorModeNoticePanel
           {...tip}
           onExited={() => setNotice(false)}
@@ -176,7 +176,7 @@ export const SiteLayout: FC = memo(({ children }) => {
         />
       </Suspense>
 
-      <Suspense fallback={null}>
+      <Suspense>
         <SearchHotKey />
       </Suspense>
     </ModalStackProvider>
diff --git a/src/pages/[page]/index.tsx b/src/pages/[page]/index.tsx
index dac6404cf..0bc496b68 100644
--- a/src/pages/[page]/index.tsx
+++ b/src/pages/[page]/index.tsx
@@ -1,7 +1,13 @@
 import type { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
-import React, { Fragment, useEffect, useMemo, useRef } from 'react'
+import React, {
+  Fragment,
+  lazy,
+  Suspense,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
 import RemoveMarkdown from 'remove-markdown'
 import { shallow } from 'zustand/shallow'
 
@@ -26,8 +32,10 @@ import { springScrollToTop } from '~/utils/spring'
 
 import styles from './index.module.css'
 
-const CommentLazy = dynamic(() =>
-  import('~/components/widgets/Comment').then((mo) => mo.CommentLazy),
+const CommentLazy = lazy(() =>
+  import('~/components/widgets/Comment').then((mo) => ({
+    default: mo.CommentLazy,
+  })),
 )
 
 const PageView: PageOnlyProps = (props) => {
@@ -108,11 +116,13 @@ const PageView: PageOnlyProps = (props) => {
           )}
         </div>
       </div>
-      <CommentLazy
-        key={page.id}
-        id={page.id}
-        allowComment={page.allowComment ?? true}
-      />
+      <Suspense fallback={null}>
+        <CommentLazy
+          key={page.id}
+          id={page.id}
+          allowComment={page.allowComment ?? true}
+        />
+      </Suspense>
     </ArticleLayout>
   )
 }
diff --git a/src/pages/notes/[id].tsx b/src/pages/notes/[id].tsx
index ebdf36bb3..e1507363e 100644
--- a/src/pages/notes/[id].tsx
+++ b/src/pages/notes/[id].tsx
@@ -1,9 +1,15 @@
 import type { AxiosError } from 'axios'
 import dayjs from 'dayjs'
 import type { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
-import React, { createElement, memo, useEffect, useMemo, useRef } from 'react'
+import React, {
+  createElement,
+  lazy,
+  memo,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
 import { message } from 'react-message-popup'
 import useUpdate from 'react-use/lib/useUpdate'
 
@@ -13,6 +19,7 @@ import { RequestError } from '@mx-space/api-client'
 import { noteCollection, useNoteCollection } from '~/atoms/collections/note'
 import type { ModelWithDeleted } from '~/atoms/collections/utils/base'
 import { useIsLogged, useUserStore } from '~/atoms/user'
+import { Suspense } from '~/components/app/Suspense'
 import { wrapperNextPage } from '~/components/app/WrapperNextPage'
 import { NoteFooterNavigationBarForMobile } from '~/components/in-page/Note/NoteFooterNavigation'
 import { NoteMarkdownRender } from '~/components/in-page/Note/NoteMarkdownRender'
@@ -44,26 +51,28 @@ import { noop } from '~/utils/utils'
 import { Seo } from '../../components/app/Seo'
 import { isDev } from '../../utils/env'
 
-const NoteTopic = dynamic(() =>
-  import('~/components/in-page/Note/NoteTopic').then((mo) => mo.NoteTopic),
+const NoteTopic = lazy(() =>
+  import('~/components/in-page/Note/NoteTopic').then((mo) => ({
+    default: mo.NoteTopic,
+  })),
 )
 
-const CommentLazy = dynamic(() =>
-  import('~/components/widgets/Comment').then((mo) => mo.CommentLazy),
+const CommentLazy = lazy(() =>
+  import('~/components/widgets/Comment').then((mo) => ({
+    default: mo.CommentLazy,
+  })),
 )
 
-const ArticleLayout = dynamic(() =>
-  import('~/components/layouts/ArticleLayout').then((mo) => mo.ArticleLayout),
+const ArticleLayout = lazy(() =>
+  import('~/components/layouts/ArticleLayout').then((mo) => ({
+    default: mo.ArticleLayout,
+  })),
 )
 
-const NoteFooterActionBar = dynamic(
-  () =>
-    import('~/components/in-page/Note/NoteActionBar').then(
-      (mo) => mo.NoteFooterActionBar,
-    ),
-  {
-    ssr: false,
-  },
+const NoteFooterActionBar = lazy(() =>
+  import('~/components/in-page/Note/NoteActionBar').then((mo) => ({
+    default: mo.NoteFooterActionBar,
+  })),
 )
 
 const useUpdateNote = (note: ModelWithDeleted<NoteModel>) => {
@@ -245,25 +254,36 @@ const NoteView: React.FC<{ id: string }> = memo((props) => {
           </ImageSizeMetaContext.Provider>
         )}
         <div className="pb-8" />
-        {note.topic && <NoteTopic noteId={props.id} topic={note.topic} />}
+        {note.topic && (
+          <Suspense>
+            <NoteTopic noteId={props.id} topic={note.topic} />
+          </Suspense>
+        )}
 
         <NoteFooterNavigationBarForMobile id={props.id} />
         <div className="pb-4" />
         <SubscribeBell defaultType="note_c" />
         <XLogInfoForNote id={props.id} />
-        <NoteFooterActionBar id={props.id} />
+        <Suspense>
+          <NoteFooterActionBar id={props.id} />
+        </Suspense>
       </NoteLayout>
+
       {!isSecret && (
-        <ArticleLayout
-          className="!min-h-[unset] !pt-0"
-          key={`comments-${props.id}`}
-        >
-          <CommentLazy
-            id={id}
-            key={id}
-            allowComment={note.allowComment ?? true}
-          />
-        </ArticleLayout>
+        <Suspense>
+          <ArticleLayout
+            className="!min-h-[unset] !pt-0"
+            key={`comments-${props.id}`}
+          >
+            <Suspense>
+              <CommentLazy
+                id={id}
+                key={id}
+                allowComment={note.allowComment ?? true}
+              />
+            </Suspense>
+          </ArticleLayout>
+        </Suspense>
       )}
 
       <SearchFAB />
diff --git a/src/pages/posts/[category]/[slug].tsx b/src/pages/posts/[category]/[slug].tsx
index 2c35d8f73..a562107fd 100644
--- a/src/pages/posts/[category]/[slug].tsx
+++ b/src/pages/posts/[category]/[slug].tsx
@@ -1,11 +1,10 @@
 import dayjs from 'dayjs'
 import { pick } from 'lodash-es'
 import type { NextPage } from 'next'
-import dynamic from 'next/dynamic'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import type { FC } from 'react'
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react'
+import React, { lazy, memo, useEffect, useMemo, useRef, useState } from 'react'
 import { message } from 'react-message-popup'
 import { shallow } from 'zustand/shallow'
 
@@ -14,6 +13,7 @@ import type { PostModel } from '@mx-space/api-client'
 import { usePostCollection } from '~/atoms/collections/post'
 import type { ModelWithDeleted } from '~/atoms/collections/utils/base'
 import { Seo } from '~/components/app/Seo'
+import { Suspense } from '~/components/app/Suspense'
 import { wrapperNextPage } from '~/components/app/WrapperNextPage'
 import { KamiMarkdown } from '~/components/common/KamiMarkdown'
 import Outdate from '~/components/in-page/Post/Outdate'
@@ -28,7 +28,10 @@ import {
 } from '~/components/ui/Icons/for-post'
 import { ImageSizeMetaContext } from '~/components/ui/Image/context'
 import { Loading } from '~/components/ui/Loading'
+import { NumberTransition } from '~/components/ui/NumberRecorder'
 import type { ActionProps } from '~/components/widgets/ArticleAction'
+import { ArticleFooterAction } from '~/components/widgets/ArticleAction'
+import { DonatePopover } from '~/components/widgets/Donate'
 import { SearchFAB } from '~/components/widgets/Search'
 import { SubscribeBell } from '~/components/widgets/SubscribeBell'
 import { XLogInfoForPost } from '~/components/widgets/xLogInfo'
@@ -51,20 +54,10 @@ import { noop } from '~/utils/utils'
 
 import { Copyright } from '../../../components/widgets/Copyright'
 
-const ArticleFooterAction = dynamic(() =>
-  import('~/components/widgets/ArticleAction').then(
-    (mo) => mo.ArticleFooterAction,
-  ),
-)
-const DonatePopover = dynamic(() =>
-  import('~/components/widgets/Donate').then((mo) => mo.DonatePopover),
-)
-const CommentLazy = dynamic(() =>
-  import('~/components/widgets/Comment').then((mo) => mo.CommentLazy),
-)
-
-const NumberTransition = dynamic(() =>
-  import('~/components/ui/NumberRecorder').then((mo) => mo.NumberTransition),
+const CommentLazy = lazy(() =>
+  import('~/components/widgets/Comment').then((mo) => ({
+    default: mo.CommentLazy,
+  })),
 )
 
 const useUpdatePost = (post: ModelWithDeleted<PostModel>) => {
@@ -255,7 +248,11 @@ const FooterActionBar: FC<{ id: string }> = ({ id }) => {
     post.category.slug,
   ])
 
-  return <ArticleFooterAction {...actions} />
+  return (
+    <Suspense>
+      <ArticleFooterAction {...actions} />
+    </Suspense>
+  )
 }
 
 const PostUpdateObserver: FC<{ id: string }> = memo(({ id }) => {
@@ -342,12 +339,13 @@ export const PostView: PageOnlyProps = (props) => {
 
         <XLogInfoForPost id={post.id} />
         <FooterActionBar id={post.id} />
-
-        <CommentLazy
-          key={post.id}
-          id={post.id}
-          allowComment={post.allowComment ?? true}
-        />
+        <Suspense>
+          <CommentLazy
+            key={post.id}
+            id={post.id}
+            allowComment={post.allowComment ?? true}
+          />
+        </Suspense>
 
         <SearchFAB />
       </ArticleLayout>