refactor(watch): move down resources list to a suspended RSC (#55)

gdarchen · Jul 26, 2024 · 020b7de · 020b7de
1 parent 3a6210e
commit 020b7de
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 14 deletions.
diff --git a/src/app/watch/components/search/Search.tsx b/src/app/watch/components/search/Search.tsx
@@ -6,7 +6,7 @@ import { IoClose } from 'react-icons/io5'
 import { useDebounce } from 'use-debounce'
 import { useEventListener } from 'usehooks-ts'
 
-import WatchResource from '@/app/watch/watchResource'
+import WatchResource from '@/app/watch/components/watchResource/watchResource'
 import Spinner from '@/components/spinner/Spinner'
 import { Input } from '@headlessui/react'
 

diff --git a/src/app/watch/watchResource.tsx → ...omponents/watchResource/watchResource.tsx b/src/app/watch/watchResource.tsx → ...omponents/watchResource/watchResource.tsx
@@ -11,7 +11,7 @@ import { tv } from 'tailwind-variants'
 import Badge from '@/components/badge/Badge'
 import Meteors from '@/components/cards/Meteors'
 
-import type { WatchResource } from './types'
+import type { WatchResource } from '../../types'
 
 const VariantMapping = {
   Article: {

diff --git a/src/app/watch/watchResources.tsx → ...mponents/watchResource/watchResources.tsx b/src/app/watch/watchResources.tsx → ...mponents/watchResource/watchResources.tsx
@@ -5,8 +5,12 @@ import { FC, useState } from 'react'
 import Spinner from '@/components/spinner/Spinner'
 import { fetchWatchPages } from '@/lib/notion'
 
-import { transformWatchResourceToDTO } from './dto/watchResource.dto'
-import { groupWatchResourcesByDate, groupWatchResourcesByMonth } from './utils'
+import { transformWatchResourceToDTO } from '../../dto/watchResource.dto'
+import {
+  groupWatchResourcesByDate,
+  groupWatchResourcesByMonth,
+} from '../../utils'
+
 import WatchResource from './watchResource'
 
 type Props = {

diff --git a/src/app/watch/page.tsx b/src/app/watch/page.tsx
@@ -1,17 +1,15 @@
+import { Suspense } from 'react'
+
 import ArrowIcon from '@/components/icons/ArrowIcon'
-import { fetchWatchPages } from '@/lib/notion'
+import Spinner from '@/components/spinner/Spinner'
 
 import IntroAlert from './components/introAlert/IntroAlert'
 import Search from './components/search/Search'
-import { transformWatchResourceToDTO } from './dto/watchResource.dto'
-import WatchResources from './watchResources'
+import WatchResourcesList from './watchResourcesList'
 
 export const revalidate = 3600
 
 export default async function Page() {
-  const firstPage = await fetchWatchPages()
-  const initialResources = firstPage.results.map(transformWatchResourceToDTO)
-
   return (
     <div className="flex h-full flex-col justify-center px-8 py-32">
       {/* Title */}
@@ -33,10 +31,16 @@ export default async function Page() {
       <Search />
 
       {/* Resources */}
-      <WatchResources
-        initialResources={initialResources}
-        initialNextPage={firstPage.next_cursor}
-      />
+      <Suspense
+        fallback={
+          <div className="mt-24 flex items-center justify-center text-gray-600 dark:text-white">
+            <Spinner className="mr-2 [&>svg]:size-6" />
+            Loading...
+          </div>
+        }
+      >
+        <WatchResourcesList />
+      </Suspense>
     </div>
   )
 }
diff --git a/src/app/watch/watchResourcesList.tsx b/src/app/watch/watchResourcesList.tsx
@@ -0,0 +1,16 @@
+import { fetchWatchPages } from '@/lib/notion'
+
+import WatchResources from './components/watchResource/watchResources'
+import { transformWatchResourceToDTO } from './dto/watchResource.dto'
+
+export default async function WatchResourcesList() {
+  const firstPage = await fetchWatchPages()
+  const initialResources = firstPage.results.map(transformWatchResourceToDTO)
+
+  return (
+    <WatchResources
+      initialResources={initialResources}
+      initialNextPage={firstPage.next_cursor}
+    />
+  )
+}