diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index d52395a9ad..fd1c26382f 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,13 +1,7 @@ 'use client' import { useQuery } from '@tanstack/react-query' -import React, { - createElement, - forwardRef, - useCallback, - useEffect, - useRef, -} from 'react' +import React, { createElement, forwardRef, useCallback, useRef } from 'react' import clsx from 'clsx' import { m, useInView } from 'framer-motion' import Link from 'next/link' @@ -34,7 +28,6 @@ import { clsxm } from '~/lib/helper' import { noopObj } from '~/lib/noop' import { apiClient } from '~/lib/request' import { routeBuilder, Routes } from '~/lib/route-builder' -import { springScrollToTop } from '~/lib/scroller' import { useAggregationSelector, useAppConfigSelector, @@ -71,10 +64,6 @@ const Screen = forwardRef< Screen.displayName = 'Screen' export default function Home() { - useEffect(() => { - if (isDev) return - springScrollToTop() - }, []) return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a2a8d2adbf..f15e1f7af0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,6 +9,7 @@ import { ClerkProvider } from '@clerk/nextjs' import PKG from '~/../package.json' import { HydrationEndDetector } from '~/components/common/HydrationEndDetector' +import { ScrollTop } from '~/components/common/ScrollTop' import { Root } from '~/components/layout/root/Root' import { SearchPanelWithHotKey } from '~/components/widgets/shared/SearchFAB' import { TocAutoScroll } from '~/components/widgets/toc/TocAutoScroll' @@ -141,6 +142,7 @@ export default async function RootLayout(props: Props) { + diff --git a/src/app/notes/[id]/pageImpl.tsx b/src/app/notes/[id]/pageImpl.tsx index b7cac0e08f..64ed66851a 100644 --- a/src/app/notes/[id]/pageImpl.tsx +++ b/src/app/notes/[id]/pageImpl.tsx @@ -4,7 +4,6 @@ import type { NoteModel } from '@mx-space/api-client' import { ClientOnly } from '~/components/common/ClientOnly' -import { ScrollTop } from '~/components/common/ScrollTop' import { NoteActionAside, NoteFooterNavigationBarForMobile, @@ -38,8 +37,6 @@ import { const NotePage = function (props: NoteModel) { return ( <> - -
diff --git a/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx b/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx index 6605275fab..3d88955d15 100644 --- a/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx +++ b/src/app/posts/(post-detail)/[category]/[slug]/pageImpl.tsx @@ -1,7 +1,6 @@ import type { PostModel } from '@mx-space/api-client' import { ClientOnly } from '~/components/common/ClientOnly' -import { ScrollTop } from '~/components/common/ScrollTop' import { PostActionAside, PostCopyright, @@ -36,7 +35,7 @@ const PostPage = (props: PostModel) => { return (
- +
diff --git a/src/app/thinking/page.tsx b/src/app/thinking/page.tsx index 4baab59140..faea6683b5 100644 --- a/src/app/thinking/page.tsx +++ b/src/app/thinking/page.tsx @@ -1,7 +1,7 @@ 'use client' import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query' -import { useEffect, useLayoutEffect, useMemo, useState } from 'react' +import { useEffect, useMemo, useState } from 'react' import clsx from 'clsx' import { stagger, useAnimate } from 'framer-motion' import { produce } from 'immer' @@ -29,7 +29,6 @@ import { usePrevious } from '~/hooks/common/use-previous' import { sample } from '~/lib/_' import { preventDefault } from '~/lib/dom' import { apiClient } from '~/lib/request' -import { springScrollToTop } from '~/lib/scroller' import { toast } from '~/lib/toast' import { urlBuilder } from '~/lib/url-builder' import { useAggregationSelector } from '~/providers/root/aggregation-data-provider' @@ -38,9 +37,6 @@ import { useModalStack } from '~/providers/root/modal-stack-provider' import { FETCH_SIZE, QUERY_KEY } from './constants' export default function Page() { - useLayoutEffect(() => { - springScrollToTop() - }, []) return (
diff --git a/src/components/common/ScrollTop.tsx b/src/components/common/ScrollTop.tsx index 054e95ce05..444dcadb5c 100644 --- a/src/components/common/ScrollTop.tsx +++ b/src/components/common/ScrollTop.tsx @@ -1,12 +1,16 @@ 'use client' -import { useEffect } from 'react' +import { memo, useEffect } from 'react' +import { usePathname } from 'next/navigation' import { springScrollToTop } from '~/lib/scroller' -export const ScrollTop = () => { +export const ScrollTop = memo(() => { + const pathname = usePathname() useEffect(() => { springScrollToTop() - }, []) + }, [pathname]) return null -} +}) + +ScrollTop.displayName = 'ScrollTop' diff --git a/src/components/layout/container/Paper.tsx b/src/components/layout/container/Paper.tsx index 200bb3ab36..6074432404 100644 --- a/src/components/layout/container/Paper.tsx +++ b/src/components/layout/container/Paper.tsx @@ -15,6 +15,73 @@ export const Paper: Component<{ )} > {children} + + {/* + + + + + + + + + + + + + + + + + + + + */} ) }