Skip to content

Commit a61bdc9

Browse files
InneiInnei
committed
fix: page always loading
Signed-off-by: Innei <tukon479@gmail.com>
1 parent 3cfb010 commit a61bdc9

File tree

8 files changed

+123
-90
lines changed

8 files changed

+123
-90
lines changed

‎next.d.ts

Lines changed: 0 additions & 8 deletions
This file was deleted.

‎src/components/app/Suspense/index.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type { FC } from 'react'
2+
import { Suspense as ReactSuspense } from 'react'
3+
4+
export const Suspense: FC = (props) => {
5+
return <ReactSuspense fallback={null}>{props.children}</ReactSuspense>
6+
}

‎src/components/common/KamiMarkdown/MarkdownToc.tsx

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import dynamic from 'next/dynamic'
21
import type { FC } from 'react'
3-
import { memo, useEffect } from 'react'
2+
import { lazy, memo, useEffect } from 'react'
43

54
import { useActionStore } from '~/atoms/action'
65
import { useAppStore } from '~/atoms/app'
6+
import { Suspense } from '~/components/app/Suspense'
77
import { FloatPopover } from '~/components/ui/FloatPopover'
88
import { FluentList16Filled } from '~/components/ui/Icons/shared'
99
import { useModalStack } from '~/components/ui/Modal'
1010
import type { TocProps } from '~/components/widgets/Toc'
1111
import { useDetectIsNarrowThanLaptop } from '~/hooks/ui/use-viewport'
1212

13-
const Toc = dynamic(
14-
() => import('~/components/widgets/Toc').then((m) => m.Toc),
15-
{
16-
ssr: false,
17-
},
13+
const Toc = lazy(() =>
14+
import('~/components/widgets/Toc').then((m) => ({
15+
default: m.Toc,
16+
})),
1817
)
1918

2019
export const MarkdownToc: FC<TocProps> = memo((props) => {
@@ -62,5 +61,9 @@ export const MarkdownToc: FC<TocProps> = memo((props) => {
6261
actionStore.removeActionById(id)
6362
}
6463
}, [isNarrowThanLaptop, isMobile, present, props])
65-
return !isNarrowThanLaptop ? <Toc {...props} /> : null
64+
return !isNarrowThanLaptop ? (
65+
<Suspense>
66+
<Toc {...props} />
67+
</Suspense>
68+
) : null
6669
})

‎src/components/layouts/NoteLayout.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import clsx from 'clsx'
22
import dayjs from 'dayjs'
33
import { motion, useAnimationControls } from 'framer-motion'
4-
import dynamic from 'next/dynamic'
54
import type { ReactNode } from 'react'
6-
import { forwardRef, useCallback, useEffect } from 'react'
5+
import { forwardRef, lazy, useCallback, useEffect } from 'react'
76
import { shallow } from 'zustand/shallow'
87

98
import { useAppStore } from '~/atoms/app'
@@ -19,14 +18,15 @@ import { microReboundPreset } from '~/constants/spring'
1918
import { springScrollToElement } from '~/utils/spring'
2019
import { resolveUrl } from '~/utils/utils'
2120

21+
import { Suspense } from '../app/Suspense'
2222
import { IconTransition } from '../common/IconTransition'
2323
import { AnimateChangeInHeight } from '../ui/AnimateChangeInHeight'
2424
import { Banner } from '../ui/Banner'
2525

26-
const NoteTimelineList = dynamic(() =>
27-
import('~/components/in-page/Note/NoteTimelineList').then(
28-
(mo) => mo.NoteTimelineList,
29-
),
26+
const NoteTimelineList = lazy(() =>
27+
import('~/components/in-page/Note/NoteTimelineList').then((mo) => ({
28+
default: mo.NoteTimelineList,
29+
})),
3030
)
3131

3232
const bannerClassNames = {
@@ -221,7 +221,11 @@ export const NoteLayout = forwardRef<HTMLElement, NoteLayoutProps>(
221221
</div>
222222
</motion.div>
223223

224-
{!isPreview && <NoteTimelineList noteId={id} />}
224+
{!isPreview && (
225+
<Suspense>
226+
<NoteTimelineList noteId={id} />
227+
</Suspense>
228+
)}
225229
</main>
226230
)
227231
},

‎src/components/layouts/SiteLayout/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { FC } from 'react'
22
import React, {
33
memo,
4-
Suspense,
54
useCallback,
65
useEffect,
76
useId,
@@ -13,6 +12,7 @@ import { ShortcutProvider } from 'react-shortcut-guide'
1312

1413
import { useActionStore } from '~/atoms/action'
1514
import { useAppStore } from '~/atoms/app'
15+
import { Suspense } from '~/components/app/Suspense'
1616
import { BiMoonStarsFill, PhSunBold } from '~/components/ui/Icons/layout'
1717
import { ModalStackProvider } from '~/components/ui/Modal'
1818
import { TrackerAction } from '~/constants/tracker'
@@ -134,7 +134,7 @@ export const SiteLayout: FC = memo(({ children }) => {
134134
<div className="bg absolute inset-0 transform-gpu" />
135135
</div>
136136

137-
<Suspense fallback={null}>
137+
<Suspense>
138138
<Header />
139139
</Suspense>
140140

@@ -155,19 +155,19 @@ export const SiteLayout: FC = memo(({ children }) => {
155155
}
156156
/>
157157

158-
<Suspense fallback={null}>
158+
<Suspense>
159159
<Footer />
160160
</Suspense>
161161

162-
<Suspense fallback={null}>
162+
<Suspense>
163163
<MusicMiniPlayerStoreControlled />
164164
</Suspense>
165165

166-
<Suspense fallback={null}>
166+
<Suspense>
167167
{!isNarrowThanLaptop && <LampSwitch onClick={handleChangeColorMode} />}
168168
</Suspense>
169169

170-
<Suspense fallback={null}>
170+
<Suspense>
171171
<ColorModeNoticePanel
172172
{...tip}
173173
onExited={() => setNotice(false)}
@@ -176,7 +176,7 @@ export const SiteLayout: FC = memo(({ children }) => {
176176
/>
177177
</Suspense>
178178

179-
<Suspense fallback={null}>
179+
<Suspense>
180180
<SearchHotKey />
181181
</Suspense>
182182
</ModalStackProvider>

‎src/pages/[page]/index.tsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
import type { NextPage } from 'next'
2-
import dynamic from 'next/dynamic'
32
import Link from 'next/link'
4-
import React, { Fragment, useEffect, useMemo, useRef } from 'react'
3+
import React, {
4+
Fragment,
5+
lazy,
6+
Suspense,
7+
useEffect,
8+
useMemo,
9+
useRef,
10+
} from 'react'
511
import RemoveMarkdown from 'remove-markdown'
612
import { shallow } from 'zustand/shallow'
713

@@ -26,8 +32,10 @@ import { springScrollToTop } from '~/utils/spring'
2632

2733
import styles from './index.module.css'
2834

29-
const CommentLazy = dynamic(() =>
30-
import('~/components/widgets/Comment').then((mo) => mo.CommentLazy),
35+
const CommentLazy = lazy(() =>
36+
import('~/components/widgets/Comment').then((mo) => ({
37+
default: mo.CommentLazy,
38+
})),
3139
)
3240

3341
const PageView: PageOnlyProps = (props) => {
@@ -108,11 +116,13 @@ const PageView: PageOnlyProps = (props) => {
108116
)}
109117
</div>
110118
</div>
111-
<CommentLazy
112-
key={page.id}
113-
id={page.id}
114-
allowComment={page.allowComment ?? true}
115-
/>
119+
<Suspense fallback={null}>
120+
<CommentLazy
121+
key={page.id}
122+
id={page.id}
123+
allowComment={page.allowComment ?? true}
124+
/>
125+
</Suspense>
116126
</ArticleLayout>
117127
)
118128
}

‎src/pages/notes/[id].tsx

Lines changed: 48 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import type { AxiosError } from 'axios'
22
import dayjs from 'dayjs'
33
import type { NextPage } from 'next'
4-
import dynamic from 'next/dynamic'
54
import { useRouter } from 'next/router'
6-
import React, { createElement, memo, useEffect, useMemo, useRef } from 'react'
5+
import React, {
6+
createElement,
7+
lazy,
8+
memo,
9+
useEffect,
10+
useMemo,
11+
useRef,
12+
} from 'react'
713
import { message } from 'react-message-popup'
814
import useUpdate from 'react-use/lib/useUpdate'
915

@@ -13,6 +19,7 @@ import { RequestError } from '@mx-space/api-client'
1319
import { noteCollection, useNoteCollection } from '~/atoms/collections/note'
1420
import type { ModelWithDeleted } from '~/atoms/collections/utils/base'
1521
import { useIsLogged, useUserStore } from '~/atoms/user'
22+
import { Suspense } from '~/components/app/Suspense'
1623
import { wrapperNextPage } from '~/components/app/WrapperNextPage'
1724
import { NoteFooterNavigationBarForMobile } from '~/components/in-page/Note/NoteFooterNavigation'
1825
import { NoteMarkdownRender } from '~/components/in-page/Note/NoteMarkdownRender'
@@ -44,26 +51,28 @@ import { noop } from '~/utils/utils'
4451
import { Seo } from '../../components/app/Seo'
4552
import { isDev } from '../../utils/env'
4653

47-
const NoteTopic = dynamic(() =>
48-
import('~/components/in-page/Note/NoteTopic').then((mo) => mo.NoteTopic),
54+
const NoteTopic = lazy(() =>
55+
import('~/components/in-page/Note/NoteTopic').then((mo) => ({
56+
default: mo.NoteTopic,
57+
})),
4958
)
5059

51-
const CommentLazy = dynamic(() =>
52-
import('~/components/widgets/Comment').then((mo) => mo.CommentLazy),
60+
const CommentLazy = lazy(() =>
61+
import('~/components/widgets/Comment').then((mo) => ({
62+
default: mo.CommentLazy,
63+
})),
5364
)
5465

55-
const ArticleLayout = dynamic(() =>
56-
import('~/components/layouts/ArticleLayout').then((mo) => mo.ArticleLayout),
66+
const ArticleLayout = lazy(() =>
67+
import('~/components/layouts/ArticleLayout').then((mo) => ({
68+
default: mo.ArticleLayout,
69+
})),
5770
)
5871

59-
const NoteFooterActionBar = dynamic(
60-
() =>
61-
import('~/components/in-page/Note/NoteActionBar').then(
62-
(mo) => mo.NoteFooterActionBar,
63-
),
64-
{
65-
ssr: false,
66-
},
72+
const NoteFooterActionBar = lazy(() =>
73+
import('~/components/in-page/Note/NoteActionBar').then((mo) => ({
74+
default: mo.NoteFooterActionBar,
75+
})),
6776
)
6877

6978
const useUpdateNote = (note: ModelWithDeleted<NoteModel>) => {
@@ -245,25 +254,36 @@ const NoteView: React.FC<{ id: string }> = memo((props) => {
245254
</ImageSizeMetaContext.Provider>
246255
)}
247256
<div className="pb-8" />
248-
{note.topic && <NoteTopic noteId={props.id} topic={note.topic} />}
257+
{note.topic && (
258+
<Suspense>
259+
<NoteTopic noteId={props.id} topic={note.topic} />
260+
</Suspense>
261+
)}
249262

250263
<NoteFooterNavigationBarForMobile id={props.id} />
251264
<div className="pb-4" />
252265
<SubscribeBell defaultType="note_c" />
253266
<XLogInfoForNote id={props.id} />
254-
<NoteFooterActionBar id={props.id} />
267+
<Suspense>
268+
<NoteFooterActionBar id={props.id} />
269+
</Suspense>
255270
</NoteLayout>
271+
256272
{!isSecret && (
257-
<ArticleLayout
258-
className="!min-h-[unset] !pt-0"
259-
key={`comments-${props.id}`}
260-
>
261-
<CommentLazy
262-
id={id}
263-
key={id}
264-
allowComment={note.allowComment ?? true}
265-
/>
266-
</ArticleLayout>
273+
<Suspense>
274+
<ArticleLayout
275+
className="!min-h-[unset] !pt-0"
276+
key={`comments-${props.id}`}
277+
>
278+
<Suspense>
279+
<CommentLazy
280+
id={id}
281+
key={id}
282+
allowComment={note.allowComment ?? true}
283+
/>
284+
</Suspense>
285+
</ArticleLayout>
286+
</Suspense>
267287
)}
268288

269289
<SearchFAB />

0 commit comments

Comments
 (0)