skeleton

src/app/page.tsx

@@ -1,10 +1,21 @@
 import { NextPage } from 'next'
+import { Suspense } from 'react'
 import { HydrationBoundary } from '@tanstack/react-query'
 import { dehydrate } from '@tanstack/react-query'
 import { QueryClient } from '@tanstack/react-query'
 import { landingQueryOptions } from './home/hooks/useHomeData'
 import LangingPage from './home/LangingPage'
-const Home: NextPage = async () => {
+import Loading from './loading'
+
+const Home: NextPage = () => {
+  return (
+    <Suspense fallback={<Loading />}>
+      <HomeContent />
+    </Suspense>
+  )
+}
+
+async function HomeContent() {
   const queryClient = new QueryClient()
   await queryClient.prefetchQuery(landingQueryOptions)