From f5b0f06bba4abf2ef068be5fd72b7ed4dde026e9 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Tue, 10 Feb 2026 00:57:32 -0500
Subject: [PATCH] show Ops, something went wrong if we unable to load chore

---
 src/views/Chores/MyChores.jsx | 50 ++++++++++++++++++++++++++++++++++-
 1 file changed, 49 insertions(+), 1 deletion(-)

diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index 71d9f4e..2af0457 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -92,9 +92,15 @@ const MyChores = () => {
   const {
     data: choresData,
     isLoading: choresLoading,
+    isError: choresError,
+    error: choresErrorDetails,
     refetch: refetchChores,
   } = useChores(false)
-  const { data: membersData, isLoading: membersLoading } = useCircleMembers()
+  const {
+    data: membersData,
+    isLoading: membersLoading,
+    isError: membersError,
+  } = useCircleMembers()
 
   const [chores, setChores] = useState([])
   const [filteredChores, setFilteredChores] = useState([])
@@ -750,6 +756,48 @@ const MyChores = () => {
     setSearchFilter('All')
   }
 
+  // Show error state when API is unreachable
+  if (choresError || membersError) {
+    return (
+      <Container maxWidth='md'>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'column',
+            height: '70vh',
+            gap: 2,
+          }}
+        >
+          <Box sx={{ mb: 2, opacity: 0.7 }}>
+            <Logo />
+          </Box>
+          <Typography level='h4' color='danger'>
+            Unable to communicate with server
+          </Typography>
+          <Typography
+            level='body-md'
+            sx={{ textAlign: 'center', maxWidth: 400 }}
+          >
+            {choresErrorDetails?.message ||
+              'The server is currently unavailable. Please check your connection and try again.'}
+          </Typography>
+          <Button
+            variant='solid'
+            color='primary'
+            onClick={() => {
+              refetchChores()
+              queryClient.invalidateQueries(['circleMembers'])
+            }}
+          >
+            Retry Connection
+          </Button>
+        </Box>
+      </Container>
+    )
+  }
+
   if (
     isUserProfileLoading ||
     userProfile === null ||