fix: note page render lcp

Signed-off-by: Innei <[email protected]>

Author: Innei

src/app/notes/[id]/page.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 'use client'
 
-import { memo, Suspense, useEffect } from 'react'
+import { memo, useEffect } from 'react'
 import { Balancer } from 'react-wrap-balancer'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
@@ -71,7 +71,7 @@ const NotePage = memo(function Notepage() {
   if (!noteId) return null
 
   return (
-    <Suspense>
+    <>
       <article
         className={clsx(
           'prose relative',
@@ -119,7 +119,7 @@ const NotePage = memo(function Notepage() {
       <NoteTopic />
       <XLogInfoForNote />
       <NoteFooterNavigationBarForMobile noteId={noteId} />
-    </Suspense>
+    </>
   )
 })
 
@@ -171,16 +171,14 @@ const NoteHeaderDate = () => {
 }
 
 const NoteMarkdown = () => {
-  const text = useCurrentNoteDataSelector((data) => data?.data.text)
-  if (!text) return null
+  const text = useCurrentNoteDataSelector((data) => data?.data.text)!
 
   return <Markdown as="main" renderers={MarkdownRenderers} value={text} />
 }
 const NoteMarkdownImageRecordProvider = (props: PropsWithChildren) => {
   const images = useCurrentNoteDataSelector(
     (data) => data?.data.images || (noopArr as Image[]),
-  )
-  if (!images) return null
+  )!
 
   return (
     <MarkdownImageRecordProvider images={images}>

src/components/common/BanCopyWrapper.tsx

@@ -5,10 +5,9 @@ import type { FC, PropsWithChildren } from 'react'
 
 import { isLogged } from '~/atoms'
 
-import { withNoSSR } from '../hoc/with-no-ssr'
 import { DialogOverlay } from '../ui/dlalog'
 
-export const BanCopyWrapper: FC<PropsWithChildren> = withNoSSR((props) => {
+export const BanCopyWrapper: FC<PropsWithChildren> = (props) => {
   const [showCopyWarn, setShowCopyWarn] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
@@ -72,4 +71,4 @@ export const BanCopyWrapper: FC<PropsWithChildren> = withNoSSR((props) => {
       </Root>
     </>
   )
-})
+}

src/components/common/ToastCard.tsx

@@ -37,6 +37,7 @@ export const ToastCard: FC<{
         'border border-slate-100/80 dark:border-neutral-900/80',
         'space-x-4',
         'flex items-center',
+        'select-none',
       )}
     >
       {iconElement ?? typeMap[props.toastProps?.type ?? 'default']}

src/components/widgets/comment/CommentBox/CommentBoxLegacyForm.tsx

@@ -1,3 +1,43 @@
+import clsx from 'clsx'
+import Image from 'next/image'
+
+import { useIsLogged } from '~/atoms'
+import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'
+
+import { CommentBoxActionBar } from './ActionBar'
+import { UniversalTextArea } from './UniversalTextArea'
+
 export const CommentBoxLegacyForm = () => {
+  const isLogger = useIsLogged()
+  if (isLogger) return <LoggedForm />
   return null
 }
+
+const LoggedForm = () => {
+  const user = useAggregationSelector((v) => v.user)!
+
+  return (
+    <div className="flex space-x-4">
+      <div
+        className={clsx(
+          'mb-2 flex-shrink-0 select-none self-end overflow-hidden rounded-full',
+          'dark:ring-zinc-800" bg-zinc-200 ring-2 ring-zinc-200 dark:bg-zinc-800',
+          'ml-[2px] backface-hidden',
+        )}
+      >
+        <Image
+          className="rounded-full object-cover"
+          src={user.avatar}
+          alt={`${user.name || user.username}'s avatar`}
+          width={48}
+          height={48}
+        />
+      </div>
+      <div className="relative h-[150px] w-full rounded-lg bg-gray-200/50 pb-5 dark:bg-zinc-800/50">
+        <UniversalTextArea />
+      </div>
+
+      <CommentBoxActionBar className="absolute bottom-0 left-12 right-0 mb-2 ml-4 w-auto px-4" />
+    </div>
+  )
+}

src/components/widgets/note/NoteHideIfSecret.tsx

@@ -12,14 +12,14 @@ import { useCurrentNoteId } from '~/providers/note/CurrentNoteIdProvider'
 
 export const NoteHideIfSecret: Component = ({ children }) => {
   const noteSecret = useCurrentNoteDataSelector((data) => data?.data.secret)
-  const nodeId = useCurrentNoteId()
+  const noteId = useCurrentNoteId()
   const secretDate = useMemo(() => new Date(noteSecret!), [noteSecret])
   const isSecret = noteSecret ? dayjs(noteSecret).isAfter(new Date()) : false
 
   const isLogged = useIsLogged()
 
   useEffect(() => {
-    if (!nodeId) return
+    if (!noteId) return
     let timer: any
     const timeout = +secretDate - +new Date()
     // https://stackoverflow.com/questions/3468607/why-does-settimeout-break-for-large-millisecond-delay-values
@@ -33,9 +33,9 @@ export const NoteHideIfSecret: Component = ({ children }) => {
     return () => {
       clearTimeout(timer)
     }
-  }, [isSecret, secretDate, nodeId])
+  }, [isSecret, secretDate, noteId])
 
-  if (!nodeId) return null
+  if (!noteId) return null
 
   if (isSecret) {
     const dateFormat = noteSecret

src/components/widgets/toc/TocAside.tsx

@@ -3,10 +3,7 @@
 import React, { useEffect, useMemo, useRef } from 'react'
 
 import { throttle } from '~/lib/_'
-import {
-  useWrappedElement,
-  useWrappedElementSize,
-} from '~/providers/shared/WrappedElementProvider'
+import { useWrappedElement } from '~/providers/shared/WrappedElementProvider'
 import { clsxm } from '~/utils/helper'
 
 import { TocTree } from './TocTree'
@@ -26,7 +23,7 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
 }) => {
   const containerRef = useRef<HTMLUListElement>(null)
   const $article = useWrappedElement()
-  const { h } = useWrappedElementSize()
+  // const { h } = useWrappedElementSize()
 
   if (typeof $article === 'undefined') {
     throw new Error('<Toc /> must be used in <WrappedElementProvider />')
@@ -39,7 +36,7 @@ export const TocAside: Component<TocAsideProps & TocSharedProps> = ({
     return [
       ...$article.querySelectorAll('h1,h2,h3,h4,h5,h6'),
     ] as HTMLHeadingElement[]
-  }, [$article, h])
+  }, [$article])
 
   useEffect(() => {
     const setMaxWidth = throttle(() => {

src/components/widgets/xlog/XLogInfo.tsx

@@ -82,7 +82,7 @@ const XLogInfoBase: FC<{
   }
 
   return (
-    <div className="my-6 text-sm [&_h4]:font-medium [&_section]:my-2">
+    <div className="my-6 select-none text-sm [&_h4]:font-medium [&_section]:my-2">
       <div
         role="button"
         tabIndex={0}