[WEB] Refactor homepage for suspense

samtgarson · Mar 10, 2024 · 65f65a2 · 65f65a2
1 parent 295b256
commit 65f65a2
Showing 1 changed file with 23 additions and 17 deletions.
diff --git a/web/src/app/(main)/page.tsx b/web/src/app/(main)/page.tsx
@@ -26,20 +26,18 @@ export const metadata: Metadata = {
 
 const Page = async () => {
   const currentUser = await getSessionUser()
-  const [{ data: features }, { data: home }] = await Promise.all([
-    call(fetchFeatures),
-    call(fetchHome)
-  ])
-  if (!features || !home) throw new Error('Server error')
+  const { data: features } = await call(fetchFeatures)
 
   return (
     <>
-      <div className="bg-white relative">
-        <FeatureCarousel features={features} title faces data-superjson />
-        {currentUser?.role === 'admin' && (
-          <EditFeatureCarouselDialog features={features} data-superjson />
-        )}
-      </div>
+      {features && (
+        <div className="bg-white relative">
+          <FeatureCarousel features={features} title faces data-superjson />
+          {currentUser?.role === 'admin' && (
+            <EditFeatureCarouselDialog features={features} data-superjson />
+          )}
+        </div>
+      )}
       <Marquee className="fixed bottom-0 left-0 -right-[25%] z-40 -rotate-[15deg]">
         <a
           href="https://www.instagram.com/books.about.food"
@@ -50,12 +48,20 @@ const Page = async () => {
         </a>
         <NewBookButton className="text-white">Submit a cookbook</NewBookButton>
       </Marquee>
-      <Container
-        mobile={false}
-        desktop={false}
-        belowNav={!features.length}
-        className="-mt-px"
-      >
+      <Suspense fallback={null}>
+        <HomepageContent />
+      </Suspense>
+    </>
+  )
+}
+
+async function HomepageContent() {
+  const { data: home } = await call(fetchHome)
+  if (!home) return null
+
+  return (
+    <>
+      <Container mobile={false} desktop={false} className="-mt-px">
         <div className="flex flex-wrap">
           <HomepageModule
             title="Coming Soon"