From ad03d46ec6854ed4b8db2dd163a94abae3c75b58 Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Tue, 18 Jul 2023 13:36:24 +0330
Subject: [PATCH] fix: render the mdx scroll button after react hydration

---
 .../src/client/components/mdx/HeroInfo/HeroInfo.tsx           | 4 +++-
 .../client/components/mdx/ScrollToBottom/ScrollToBottom.tsx   | 4 +---
 2 files changed, 4 insertions(+), 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
index a76ed20..635af4e 100644
--- 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
index 1a0296f..9b097c1 100644
--- 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)}