feat: Wrap ScrollToTop component with Suspense for client-side rend…

…ering
shamimbinnur · Jul 18, 2024 · 28c944f · 28c944f
1 parent d5d55e8
commit 28c944f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git a/app/pomo/page.tsx b/app/pomo/page.tsx
@@ -5,7 +5,6 @@ import MDXsection from '@/components/common/MDXsection';
 import Menu from '@/components/pomo/Menu';
 import MenuBottom from '@/components/pomo/MenuBottom';
 import ScrollToTop from '@/components/pomo/ScrollToTop';
-import { Suspense } from 'react';
 
 const Page = () => {
   const { content, meta } = getPageContent('pomodoro.mdx');
@@ -16,9 +15,7 @@ const Page = () => {
         <Menu />
         <Timer />
         <MenuBottom />
-        <Suspense>
-          <ScrollToTop />
-        </Suspense>
+        <ScrollToTop />
       </Background>
       <MDXsection meta={meta} content={content} />
     </main>

diff --git a/components/pomo/FooterNav.tsx b/components/pomo/FooterNav.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link"
-import {JSX} from "react"
+import {JSX, Suspense} from "react"
 import { HiHome } from "react-icons/hi"
 import ScrollDownLink from "./ScrollDownLink"
 
@@ -32,7 +32,9 @@ const FooterNav = () => {
           </li>
         ))}
 
-        <ScrollDownLink/>
+        <Suspense>
+          <ScrollDownLink/>
+        </Suspense>
       </ul>
     </nav>
   )