From 3c66dfd83c29eb4eeddf7d095277f6264687bce2 Mon Sep 17 00:00:00 2001
From: deveshanim3 <deveshsingh6986@gmail.com>
Date: Fri, 17 Apr 2026 18:24:55 +0000
Subject: [PATCH] fix/wrong-message-offline (#222)

Co-authored-by: deveshanim3 <deveshsingh6986@gmail.com>
Co-committed-by: deveshanim3 <deveshsingh6986@gmail.com>
---
 src/app/components/SpaceInvite.svelte | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/app/components/SpaceInvite.svelte b/src/app/components/SpaceInvite.svelte
index d748798e..f28c22c7 100644
--- a/src/app/components/SpaceInvite.svelte
+++ b/src/app/components/SpaceInvite.svelte
@@ -25,6 +25,16 @@
   const {url} = $props()
 
   const authError = deriveRelayAuthError(url)
+  let networkError = $state(false)
+  const isExplicitAuthError = $derived(
+    $authError &&
+      !(
+        $authError.toLowerCase().includes("failed") ||
+        $authError.toLowerCase().includes("timeout") ||
+        $authError.toLowerCase().includes("network")
+      ),
+  )
+  const isGenericError = $derived(networkError || ($authError && !isExplicitAuthError))
 
   const back = () => history.back()
   const copyInvite = () => clip(invite)
@@ -70,8 +80,14 @@
       ])
 
       claim = getTagValue("claim", event?.tags || []) || ""
-    } catch {
+    } catch (err) {
       claim = ""
+      if (
+        (err instanceof Error && (err.name === "AbortError" || err.name === "TimeoutError")) ||
+        !navigator.onLine
+      ) {
+        networkError = true
+      }
     } finally {
       loading = false
     }
@@ -92,7 +108,11 @@
         <p class="center">
           <Spinner {loading}>Requesting an invite link...</Spinner>
         </p>
-      {:else if $authError}
+      {:else if isGenericError}
+        <p class="center text-center">
+          Unable to reach the relay. Please check your connection and try again.
+        </p>
+      {:else if isExplicitAuthError}
         <p class="center">Oops! It looks like you're not a member of this relay.</p>
       {:else}
         <div class="flex flex-col items-center gap-6">