fix: render the mdx scroll button after react hydration

acid-info · Jul 18, 2023 · ad03d46 · ad03d46
1 parent 3f4edb4
commit ad03d46
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/HeroInfo/HeroInfo.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx'
 import React, { PropsWithChildren } from 'react'
+import { useHydrated } from '../../../lib/useHydrated'
 import { useHero } from '../Hero/Hero.context'
 import { ScrollToBottom } from '../index'
 import './HeroInfo.scss'
@@ -17,6 +18,7 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
   ...props
 }) => {
   const ctx = useHero()
+  const hydrated = useHydrated()
   const size = sizeProp ? sizeProp : ctx ? ctx.size : 'medium'
 
   return (
@@ -27,7 +29,7 @@ export const HeroInfo: React.FC<HeroInfoProps> = ({
       >
         {children}
       </div>
-      <ScrollToBottom />
+      {hydrated && <ScrollToBottom />}
     </>
   )
 }
diff --git a/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx b/packages/logos-docusaurus-theme/src/client/components/mdx/ScrollToBottom/ScrollToBottom.tsx
@@ -3,7 +3,6 @@ import clsx from 'clsx'
 import React, { HTMLProps } from 'react'
 import { useWindowSize } from 'react-use'
 import { makeStyle } from '../../../lib/makeStyle'
-import { useHydrated } from '../../../lib/useHydrated'
 import { useIsMobile } from '../../../lib/useIsMobile'
 import { useScrollY } from '../../../lib/useScrollY'
 import styles from './styles.module.scss'
@@ -14,7 +13,6 @@ export const ScrollToBottom = (
   props: TProps & HTMLProps<HTMLButtonElement>,
 ): JSX.Element => {
   const { children, className, style, ...rest } = props
-  const isHydrated = useHydrated()
   const scrollY = useScrollY()
   const isMobile = useIsMobile()
   const ws = useWindowSize()
@@ -43,7 +41,7 @@ export const ScrollToBottom = (
       className={clsx(
         styles.scrollToBottom,
         className,
-        (scrollY > 20 || !isHydrated) && styles.hide,
+        scrollY > 20 && styles.hide,
       )}
       style={makeStyle({ ...(style ?? {}) }, { vh: ws.height / 100 + 'px' })}
       {...(rest as any)}