Skip to content

Commit 8743465

Browse files
InneiInnei
committed
feat: animate and optimize
Signed-off-by: Innei <[email protected]>
1 parent a711b0f commit 8743465

File tree

13 files changed

+93
-44
lines changed

13 files changed

+93
-44
lines changed

‎src/app/(page-detail)/[slug]/layout.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { RequestError } from '@mx-space/api-client'
77
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
88
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
99
import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
10-
import { CommentAreaRoot } from '~/components/widgets/comment/CommentRoot'
10+
import { CommentAreaRootLazy } from '~/components/widgets/comment'
1111
import { TocFAB } from '~/components/widgets/toc/TocFAB'
1212
import { attachUA } from '~/lib/attach-ua'
1313
import { getSummaryFromMd } from '~/lib/markdown'
@@ -115,7 +115,7 @@ export default async (props: NextPageParams<PageParams>) => {
115115
<LayoutRightSideProvider className="absolute bottom-0 right-0 top-0 hidden translate-x-full lg:block" />
116116
</div>
117117
<BottomToUpSoftScaleTransitionView delay={1000}>
118-
<CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
118+
<CommentAreaRootLazy refId={data.id} allowComment={data.allowComment} />
119119
</BottomToUpSoftScaleTransitionView>
120120

121121
<OnlyMobile>

‎src/app/notes/[id]/layout.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { Metadata } from 'next'
33

44
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
55
import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
6-
import { CommentAreaRoot } from '~/components/widgets/comment'
6+
import { CommentAreaRootLazy } from '~/components/widgets/comment'
77
import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
88
import { TocFAB } from '~/components/widgets/toc/TocFAB'
99
import { REQUEST_QUERY } from '~/constants/system'
@@ -88,7 +88,10 @@ export default async (
8888
<Transition className="min-w-0">
8989
<Paper as={NoteMainContainer}>{props.children}</Paper>
9090
<BottomToUpSoftScaleTransitionView delay={500}>
91-
<CommentAreaRoot refId={noteObjectId} allowComment={allowComment} />
91+
<CommentAreaRootLazy
92+
refId={noteObjectId}
93+
allowComment={allowComment}
94+
/>
9295
</BottomToUpSoftScaleTransitionView>
9396
</Transition>
9497

‎src/app/posts/(post-detail)/[category]/[slug]/layout.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { RequestError } from '@mx-space/api-client'
77
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
88
import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
99
import { OnlyMobile } from '~/components/ui/viewport/OnlyMobile'
10-
import { CommentAreaRoot } from '~/components/widgets/comment'
10+
import { CommentAreaRootLazy } from '~/components/widgets/comment'
1111
import { TocFAB } from '~/components/widgets/toc/TocFAB'
1212
import { attachUA } from '~/lib/attach-ua'
1313
import { getSummaryFromMd } from '~/lib/markdown'
@@ -86,7 +86,10 @@ export default async (props: NextPageParams<PageParams>) => {
8686
{props.children}
8787

8888
<BottomToUpSoftScaleTransitionView delay={500}>
89-
<CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
89+
<CommentAreaRootLazy
90+
refId={data.id}
91+
allowComment={data.allowComment}
92+
/>
9093
</BottomToUpSoftScaleTransitionView>
9194
</BottomToUpTransitionView>
9295

‎src/app/thinking/page.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ import { TextArea } from '~/components/ui/input'
2222
import { Loading } from '~/components/ui/loading'
2323
import { Markdown } from '~/components/ui/markdown'
2424
import { RelativeTime } from '~/components/ui/relative-time'
25-
import { CommentBoxRoot } from '~/components/widgets/comment/CommentBox'
26-
import { Comments } from '~/components/widgets/comment/Comments'
25+
import { CommentBoxRootLazy, CommentsLazy } from '~/components/widgets/comment'
2726
import { PeekLink } from '~/components/widgets/peek/PeekLink'
2827
import { LoadMoreIndicator } from '~/components/widgets/shared/LoadMoreIndicator'
2928
import { usePrevious } from '~/hooks/common/use-previous'
@@ -348,16 +347,16 @@ const CommentModal = (props: RecentlyModel) => {
348347
const { id, allowComment, content } = props
349348

350349
return (
351-
<div className="max-w-95vw w-[700px] overflow-y-auto overflow-x-hidden">
350+
<div className="max-w-95vw overflow-y-auto overflow-x-hidden md:w-[500px] lg:w-[600px] xl:w-[700px]">
352351
<span>{allowComment && '回复：'}</span>
353352

354353
<Markdown className="mt-4" allowsScript>
355354
{content}
356355
</Markdown>
357356

358-
{allowComment && <CommentBoxRoot className="my-12" refId={id} />}
357+
{allowComment && <CommentBoxRootLazy className="my-12" refId={id} />}
359358

360-
<Comments refId={id} />
359+
<CommentsLazy refId={id} />
361360
</div>
362361
)
363362
}

‎src/components/widgets/comment/Comment.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Comment: Component<{
3939
<li
4040
data-comment-id={cid}
4141
data-parent-id={parentId}
42-
className={clsx('relative', className)}
42+
className={clsx('relative my-2', className)}
4343
>
4444
<div className="group flex w-full items-stretch gap-2">
4545
<div className="flex w-9 shrink-0 items-end">

‎src/components/widgets/comment/CommentReplyButton.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import type { FC } from 'react'
44

55
import { AutoResizeHeight } from '~/components/widgets/shared/AutoResizeHeight'
66

7+
import { CommentBoxRootLazy } from '.'
78
import { CommentBoxHolderPortal } from './Comment'
89
import { useCommentBoxRefIdValue } from './CommentBox/hooks'
910
import { CommentIsReplyProvider } from './CommentBox/providers'
10-
import { CommentBoxRoot } from './CommentBox/Root'
1111

1212
export const CommentReplyButton: FC<{
1313
commentId: string
@@ -45,7 +45,7 @@ export const CommentReplyButton: FC<{
4545
{replyFormOpen && (
4646
<>
4747
<div className="h-6" />
48-
<CommentBoxRoot refId={commentId} />
48+
<CommentBoxRootLazy refId={commentId} />
4949
<div className="h-6" />
5050
</>
5151
)}

‎src/components/widgets/comment/CommentRoot.tsx

+5-11
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,9 @@
11
import type { FC } from 'react'
22
import type { CommentBaseProps } from './types'
33

4-
import { LazyLoad } from '~/components/common/Lazyload'
5-
import { Loading } from '~/components/ui/loading'
6-
74
import { CommentBoxRoot } from './CommentBox/Root'
85
import { Comments } from './Comments'
96

10-
const LoadingElement = <Loading loadingText="评论区加载中..." />
117
export const CommentAreaRoot: FC<
128
CommentBaseProps & {
139
allowComment: boolean
@@ -29,13 +25,11 @@ export const CommentAreaRoot: FC<
2925
}
3026

3127
return (
32-
<LazyLoad placeholder={LoadingElement}>
33-
<div className="relative mt-12">
34-
<CommentBoxRoot refId={refId} />
28+
<div className="relative mt-12">
29+
<CommentBoxRoot refId={refId} />
3530

36-
<div className="h-12" />
37-
<Comments refId={refId} />
38-
</div>
39-
</LazyLoad>
31+
<div className="h-12" />
32+
<Comments refId={refId} />
33+
</div>
4034
)
4135
}

‎src/components/widgets/comment/CommentRootLazy.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
'use client'
2+
3+
import dynamic from 'next/dynamic'
4+
5+
import { LazyLoad } from '~/components/common/Lazyload'
6+
import { Loading } from '~/components/ui/loading'
7+
8+
const LoadingElement = <Loading loadingText="评论区加载中..." />
9+
10+
const CommentAreaRoot = dynamic(
11+
() => import('./CommentRoot').then((mod) => mod.CommentAreaRoot),
12+
{
13+
ssr: false,
14+
loading: () => LoadingElement,
15+
},
16+
)
17+
18+
export const CommentAreaRootLazy: typeof CommentAreaRoot = (props) => {
19+
return (
20+
<LazyLoad placeholder={LoadingElement}>
21+
<CommentAreaRoot {...props} />
22+
</LazyLoad>
23+
)
24+
}

‎src/components/widgets/comment/Comments.tsx

+17-12
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import type { FC } from 'react'
66
import type { CommentBaseProps } from './types'
77

88
import { NotSupport } from '~/components/common/NotSupport'
9+
import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
910
import { apiClient } from '~/lib/request'
1011

1112
import { LoadMoreIndicator } from '../shared/LoadMoreIndicator'
@@ -52,18 +53,22 @@ export const Comments: FC<CommentBaseProps> = ({ refId }) => {
5253
return (
5354
<>
5455
<ul className="min-h-[400px] list-none space-y-4">
55-
{data?.pages.map((data) =>
56-
data.data.map((comment, index) => {
57-
return (
58-
<CommentListItem
59-
comment={comment}
60-
key={comment.id}
61-
refId={refId}
62-
index={index}
63-
/>
64-
)
65-
}),
66-
)}
56+
{data?.pages.map((data, index) => {
57+
return (
58+
<BottomToUpSoftScaleTransitionView key={index}>
59+
{data.data.map((comment, index) => {
60+
return (
61+
<CommentListItem
62+
comment={comment}
63+
key={comment.id}
64+
refId={refId}
65+
index={index}
66+
/>
67+
)
68+
})}
69+
</BottomToUpSoftScaleTransitionView>
70+
)
71+
})}
6772
</ul>
6873
{hasNextPage && (
6974
<LoadMoreIndicator onLoading={fetchNextPage}>

‎src/components/widgets/comment/index.ts

+22-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,22 @@
1-
export { CommentAreaRoot } from './CommentRoot'
1+
import { createElement } from 'react'
2+
import dynamic from 'next/dynamic'
3+
4+
import { Loading } from '~/components/ui/loading'
5+
6+
export const CommentsLazy = dynamic(
7+
() => import('./Comments').then((mod) => mod.Comments),
8+
{ ssr: false },
9+
)
10+
export const CommentBoxRootLazy = dynamic(
11+
() => import('./CommentBox').then((mod) => mod.CommentBoxRoot),
12+
{
13+
ssr: false,
14+
loading: () => createElement(Loading, { useDefaultLoadingText: true }),
15+
},
16+
)
17+
18+
// export { CommentAreaRoot } from './CommentRoot'
19+
export { CommentAreaRootLazy } from './CommentRootLazy'
20+
21+
// export { Comments } from './Comments'
22+
// export { CommentBoxRoot } from './CommentBox'

‎src/components/widgets/shared/CommentModal.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { ModalContentComponent } from '~/providers/root/modal-stack-provider'
22

3-
import { CommentBoxRoot } from '../comment/CommentBox'
4-
import { Comments } from '../comment/Comments'
3+
import { CommentBoxRootLazy, CommentsLazy } from '../comment'
54

65
export interface CommentModalProps {
76
title: string
@@ -16,19 +15,19 @@ export const CommentModal: ModalContentComponent<CommentModalProps> = (
1615
const { refId, title, dismiss, initialValue } = props
1716

1817
return (
19-
<div className="max-w-95vw w-[700px] overflow-y-auto overflow-x-hidden">
18+
<div className="max-w-95vw overflow-y-auto overflow-x-hidden md:w-[500px] lg:w-[600px] xl:w-[700px]">
2019
<span>
2120
回复： <h1 className="mt-4 text-lg font-medium">{title}</h1>
2221
</span>
2322

24-
<CommentBoxRoot
23+
<CommentBoxRootLazy
2524
initialValue={initialValue}
2625
className="my-12"
2726
refId={refId}
2827
afterSubmit={dismiss}
2928
/>
3029

31-
<Comments refId={refId} />
30+
<CommentsLazy refId={refId} />
3231
</div>
3332
)
3433
}

‎src/components/widgets/shared/WithArticleSelectionAction.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ export const WithArticleSelectionAction: Component<{
104104
onClick={() => {
105105
present({
106106
title: '评论',
107+
107108
content: (rest) => (
108109
<CommentModal
109110
refId={refId}

‎src/providers/root/modal-stack-provider.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ const Modal: Component<{
219219
'relative flex flex-col overflow-hidden rounded-lg',
220220
'bg-slate-50/80 dark:bg-neutral-900/80',
221221
'p-2 shadow-2xl shadow-stone-300 backdrop-blur-sm dark:shadow-stone-800',
222-
'max-h-[70vh] min-w-[300px] max-w-[90vw] lg:max-h-[calc(100vh-20rem)] lg:max-w-[50vw]',
222+
'max-h-[70vh] min-w-[300px] max-w-[90vw] lg:max-h-[calc(100vh-20rem)] lg:max-w-[70vw]',
223223
'border border-slate-200 dark:border-neutral-800',
224224
modalClassName,
225225
)}

0 commit comments

Comments
 (0)