From 98015f1ec883d578c3836b4305b7a7b391ae1fba Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 25 Jun 2024 19:40:45 +0800
Subject: [PATCH] Better empty state handling for home

---
 .../nav-containers/HomeContainer.tsx          | 57 +++++++++++++++----
 1 file changed, 47 insertions(+), 10 deletions(-)

diff --git a/packages/web/components/nav-containers/HomeContainer.tsx b/packages/web/components/nav-containers/HomeContainer.tsx
index 2252481d4..a9b1bb5ad 100644
--- a/packages/web/components/nav-containers/HomeContainer.tsx
+++ b/packages/web/components/nav-containers/HomeContainer.tsx
@@ -28,6 +28,7 @@ import { Box, HStack, SpanBox, VStack } from '../elements/LayoutPrimitives'
 import { Toaster } from 'react-hot-toast'
 import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuery'
 import useLibraryItemActions from '../../lib/hooks/useLibraryItemActions'
+import { SyncLoader } from 'react-spinners'
 
 export function HomeContainer(): JSX.Element {
   const router = useRouter()
@@ -44,6 +45,23 @@ export function HomeContainer(): JSX.Element {
     window.localStorage.setItem('nav-return', router.asPath)
   }, [router.asPath])
 
+  if (homeData.error && homeData.errorMessage == 'PENDING') {
+    return (
+      <VStack
+        distribution="center"
+        alignment="center"
+        css={{
+          width: '100%',
+          bg: '$readerBg',
+          minHeight: '100vh',
+          minWidth: '320px',
+        }}
+      >
+        <SyncLoader color={theme.colors.omnivoreGray.toString()} size={8} />
+      </VStack>
+    )
+  }
+
   return (
     <VStack
       distribution="start"
@@ -74,11 +92,11 @@ export function HomeContainer(): JSX.Element {
         }}
       >
         {homeData.sections?.map((homeSection, idx) => {
-          if (homeSection.items.length < 1) {
-            return <SpanBox key={`section-${idx}`}></SpanBox>
-          }
           switch (homeSection.layout) {
             case 'just_added':
+              if (homeSection.items.length < 1) {
+                return <SpanBox key={`section-${idx}`}></SpanBox>
+              }
               return (
                 <JustAddedHomeSection
                   key={`section-${idx}`}
@@ -103,6 +121,9 @@ export function HomeContainer(): JSX.Element {
                 />
               )
             case 'hidden':
+              if (homeSection.items.length < 1) {
+                return <SpanBox key={`section-${idx}`}></SpanBox>
+              }
               return (
                 <HiddenHomeSection
                   key={`section-${idx}`}
@@ -235,13 +256,6 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
 
   const [items, dispatchList] = useReducer(listReducer, [])
 
-  function handleDelete(item: HomeItem) {
-    dispatchList({
-      type: 'REMOVE_ITEM',
-      itemId: item.id,
-    })
-  }
-
   useEffect(() => {
     dispatchList({
       type: 'RESET',
@@ -249,6 +263,29 @@ const TopPicksHomeSection = (props: HomeSectionProps): JSX.Element => {
     })
   }, [props])
 
+  console.log(
+    'props.homeSection.items.length: ',
+    props.homeSection.items.length
+  )
+  if (props.homeSection.items.length < 1) {
+    return (
+      <VStack
+        distribution="start"
+        css={{
+          height: '540px',
+          width: '100%',
+          gap: '20px',
+          '@mdDown': {
+            gap: '10px',
+          },
+          bg: '$homeCardHover',
+        }}
+      >
+        Your top picks are empty.
+      </VStack>
+    )
+  }
+
   return (
     <VStack
       distribution="start"