fix: page always loading

Signed-off-by: Innei <tukon479@gmail.com>

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>
+}

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
 })

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>
     )
   },

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>

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>
   )
 }

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 />