feat: optimize ux motion

Signed-off-by: Innei <i@innei.in>

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

@@ -6,6 +6,8 @@ import type { Metadata } from 'next'
 import { RequestError } from '@mx-space/api-client'
 
 import { NotSupport } from '~/components/common/NotSupport'
+import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
+import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { CommentAreaRoot } from '~/components/widgets/comment/CommentRoot'
 import { REQUEST_GEO } from '~/constants/system'
 import { attachUA } from '~/lib/attach-ua'
@@ -15,6 +17,14 @@ import { CurrentPageDataProvider } from '~/providers/page/CurrentPageDataProvide
 import { LayoutRightSideProvider } from '~/providers/shared/LayoutRightSideProvider'
 import { queries } from '~/queries/definition'
 
+import {
+  HeaderMetaInfoSetting,
+  PageLoading,
+  PagePaginator,
+  PageSubTitle,
+  PageTitle,
+} from './pageExtra'
+
 export const generateMetadata = async ({
   params,
 }: {
@@ -81,15 +91,40 @@ export default async (props: NextPageParams<PageParams>) => {
     <>
       <CurrentPageDataProvider data={data} />
       <div className="relative flex min-h-[120px] w-full">
-        {props.children}
+        <PageLoading>
+          <div className="relative w-full min-w-0">
+            <HeaderMetaInfoSetting />
+            <article className="prose">
+              <header className="mb-8">
+                <BottomToUpSoftScaleTransitionView delay={0}>
+                  <PageTitle />
+                </BottomToUpSoftScaleTransitionView>
+
+                <BottomToUpSoftScaleTransitionView delay={200}>
+                  <PageSubTitle />
+                </BottomToUpSoftScaleTransitionView>
+              </header>
+              <BottomToUpTransitionView delay={600}>
+                {props.children}
+              </BottomToUpTransitionView>
+            </article>
+
+            <PagePaginator />
+          </div>
+        </PageLoading>
 
         <LayoutRightSideProvider className="absolute bottom-0 right-0 top-0 hidden translate-x-full lg:block" />
       </div>
-      {isCN ? (
-        <NotSupport />
-      ) : (
-        <CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
-      )}
+      <BottomToUpSoftScaleTransitionView delay={1000}>
+        {isCN ? (
+          <NotSupport />
+        ) : (
+          <CommentAreaRoot
+            refId={data.id}
+            allowComment={data.allowComment ?? true}
+          />
+        )}
+      </BottomToUpSoftScaleTransitionView>
     </>
   )
 }

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

@@ -1,52 +1,23 @@
-import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
-import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { TocAside } from '~/components/widgets/toc'
 import { LayoutRightSidePortal } from '~/providers/shared/LayoutRightSideProvider'
 import { WrappedElementProvider } from '~/providers/shared/WrappedElementProvider'
 
-import {
-  HeaderMetaInfoSetting,
-  MarkdownImageRecordProviderInternal,
-  PageLoading,
-  PagePaginator,
-  PageSubTitle,
-  PageTitle,
-  PostMarkdown,
-} from './pageExtra'
+import { MarkdownImageRecordProviderInternal, PostMarkdown } from './pageExtra'
 
 const PageDetail = () => {
   return (
-    <PageLoading>
-      <div className="relative w-full min-w-0">
-        <HeaderMetaInfoSetting />
-        <article className="prose">
-          <header className="mb-8">
-            <BottomToUpSoftScaleTransitionView delay={0}>
-              <PageTitle />
-            </BottomToUpSoftScaleTransitionView>
+    <WrappedElementProvider>
+      <MarkdownImageRecordProviderInternal>
+        <PostMarkdown />
+      </MarkdownImageRecordProviderInternal>
 
-            <BottomToUpSoftScaleTransitionView delay={200}>
-              <PageSubTitle />
-            </BottomToUpSoftScaleTransitionView>
-          </header>
-          <WrappedElementProvider>
-            <MarkdownImageRecordProviderInternal>
-              <BottomToUpTransitionView delay={600}>
-                <PostMarkdown />
-              </BottomToUpTransitionView>
-            </MarkdownImageRecordProviderInternal>
-
-            <LayoutRightSidePortal>
-              <TocAside
-                className="sticky top-[120px] ml-4 mt-[120px]"
-                treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
-              />
-            </LayoutRightSidePortal>
-          </WrappedElementProvider>
-        </article>
-        <PagePaginator />
-      </div>
-    </PageLoading>
+      <LayoutRightSidePortal>
+        <TocAside
+          className="sticky top-[120px] ml-4 mt-[120px]"
+          treeClassName="max-h-[calc(100vh-6rem-4.5rem-300px)] h-[calc(100vh-6rem-4.5rem-300px)] min-h-[120px] relative"
+        />
+      </LayoutRightSidePortal>
+    </WrappedElementProvider>
   )
 }
 export default PageDetail

src/app/categories/[slug]/page.tsx

@@ -46,7 +46,6 @@ export default function Page() {
               >
                 <Link
                   prefetch={false}
-                  target="_blank"
                   href={routeBuilder(Routes.Post, {
                     slug: child.slug,
                     category: slug,

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

@@ -2,6 +2,7 @@ import { headers } from 'next/dist/client/components/headers'
 import type { Metadata } from 'next'
 
 import { NotSupport } from '~/components/common/NotSupport'
+import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { CommentAreaRoot } from '~/components/widgets/comment'
 import { NoteMainContainer } from '~/components/widgets/note/NoteMainContainer'
@@ -88,11 +89,13 @@ export default async (
 
       <BottomToUpTransitionView className="min-w-0">
         <Paper as={NoteMainContainer}>{props.children}</Paper>
-        {isCN ? (
-          <NotSupport />
-        ) : (
-          <CommentAreaRoot refId={noteObjectId} allowComment={allowComment} />
-        )}
+        <BottomToUpSoftScaleTransitionView delay={500}>
+          {isCN ? (
+            <NotSupport />
+          ) : (
+            <CommentAreaRoot refId={noteObjectId} allowComment={allowComment} />
+          )}
+        </BottomToUpSoftScaleTransitionView>
       </BottomToUpTransitionView>
     </>
   )

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

@@ -6,6 +6,7 @@ import type { Metadata } from 'next'
 import { RequestError } from '@mx-space/api-client'
 
 import { NotSupport } from '~/components/common/NotSupport'
+import { BottomToUpSoftScaleTransitionView } from '~/components/ui/transition/BottomToUpSoftScaleTransitionView'
 import { BottomToUpTransitionView } from '~/components/ui/transition/BottomToUpTransitionView'
 import { CommentAreaRoot } from '~/components/widgets/comment'
 import { REQUEST_GEO } from '~/constants/system'
@@ -88,15 +89,20 @@ export default async (props: NextPageParams<PageParams>) => {
       <div className="relative flex min-h-[120px] grid-cols-[auto,200px] lg:grid">
         <BottomToUpTransitionView className="min-w-0">
           {props.children}
+        </BottomToUpTransitionView>
+
+        <LayoutRightSideProvider className="relative hidden lg:block" />
 
+        <BottomToUpSoftScaleTransitionView delay={500}>
           {isCN ? (
             <NotSupport />
           ) : (
-            <CommentAreaRoot refId={data.id} allowComment={data.allowComment} />
+            <CommentAreaRoot
+              refId={data.id}
+              allowComment={data.allowComment ?? true}
+            />
           )}
-        </BottomToUpTransitionView>
-
-        <LayoutRightSideProvider className="relative hidden lg:block" />
+        </BottomToUpSoftScaleTransitionView>
       </div>
     </>
   )

src/components/ui/code-highlighter/CodeHighlighter.tsx

@@ -97,7 +97,10 @@ export const HighLighter: FC<Props> = (props) => {
       </span>
 
       <pre className="line-numbers !bg-transparent" data-start="1">
-        <code className={`language-${language ?? 'markup'}`} ref={ref}>
+        <code
+          className={`language-${language ?? 'markup'} !bg-transparent`}
+          ref={ref}
+        >
           {value}
         </code>
       </pre>

src/components/widgets/shared/ReadIndicator.tsx

@@ -10,9 +10,9 @@ export const ReadIndicator: Component<{
 }> = ({ className, as }) => {
   const readPercent = useReadPercent()
   const As = as || 'span'
-  return h > 0 ? (
+  return (
     <As className={clsxm('text-gray-800 dark:text-neutral-300', className)}>
       {readPercent}%
     </As>
-  ) : null
+  )
 }