From 4db8aa364144957e1789c4e450445271d558c706 Mon Sep 17 00:00:00 2001
From: Timothy Miller <46549361+timothymiller@users.noreply.github.com>
Date: Mon, 18 Sep 2023 02:11:19 -0400
Subject: [PATCH] Better organize tRPC states

---
 .../app/features/virtualized-list/screen.tsx  | 41 ++++++++-----------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/app/features/virtualized-list/screen.tsx b/packages/app/features/virtualized-list/screen.tsx
index 8cf512f24..e651d946b 100644
--- a/packages/app/features/virtualized-list/screen.tsx
+++ b/packages/app/features/virtualized-list/screen.tsx
@@ -8,32 +8,27 @@ import { SolitoImage } from 'solito/image'
 export const VirtualizedListScreen = (): React.ReactNode => {
   const query = trpc.car.all.useQuery()
 
-  if (query.isInitialLoading) {
-    return (
-      <YStack fullscreen flex={1} justifyContent="center" alignItems="center">
-        <Paragraph paddingBottom="$3">Loading...</Paragraph>
-        <Spinner />
-      </YStack>
-    )
-  }
-
   return (
-    <YStack fullscreen flex={1}>
-      {query.data?.length ? (
+    <YStack fullscreen f={1}>
+      {query.isInitialLoading ? (
+        // Loading
+        <YStack fullscreen f={1} jc="center" ai="center">
+          <Paragraph pb="$3">Loading...</Paragraph>
+          <Spinner />
+        </YStack>
+      ) : query.data?.length ? (
+        // Has Data
         <VirtualList data={query.data} renderItem={CarListItem} itemHeight={80} />
+      ) : query.error ? (
+        // Error
+        <YStack fullscreen f={1} jc="center" ai="center" p="$6">
+          <Paragraph>Error fetching cars: {query.error.message}</Paragraph>
+        </YStack>
       ) : (
-        <>
-          {query.error ? (
-            <YStack fullscreen flex={1} justifyContent="center" alignItems="center">
-              <Paragraph>Error fetching cars: {query.error.message}</Paragraph>
-            </YStack>
-          ) : null}
-          {!query.isLoading && (
-            <YStack fullscreen flex={1} justifyContent="center" alignItems="center">
-              <Paragraph>No cars found.</Paragraph>
-            </YStack>
-          )}
-        </>
+        // Empty State
+        <YStack fullscreen f={1} jc="center" ai="center">
+          <Paragraph>No cars found.</Paragraph>
+        </YStack>
       )}
     </YStack>
   )