Fixed reactivity inefficiency

src/lib/components/Notifications.svelte

@@ -804,18 +804,32 @@
 
 
 
-  // Calculate relay set when recipients change
+  // AI-NOTE: Refactored to avoid blocking $effect with async operations
+  // Calculate relay set when recipients change - non-blocking approach
   $effect(() => {
     const senderPubkey = $userStore.pubkey;
     console.log("[Relay Effect] Recipients changed:", selectedRecipients.length, "Sender:", senderPubkey?.slice(0, 8));
     
     if (selectedRecipients.length > 0 && senderPubkey) {
-      const recipientPubkeys = selectedRecipients.map(r => {
+      // Start async relay set calculation without blocking the effect
+      updateRelaySet(selectedRecipients, senderPubkey);
+    } else {
+      console.log("[Relay Effect] Clearing relays - no recipients or sender");
+      newMessageRelays = [];
+    }
+  });
+
+  /**
+   * Updates relay set asynchronously to avoid blocking the reactive system
+   */
+  async function updateRelaySet(recipients: any[], senderPubkey: string) {
+    try {
+      const recipientPubkeys = recipients.map(r => {
         const pubkey = r.pubkey!;
         // Convert npub to hex if needed
         if (pubkey.startsWith('npub')) {
           try {
-            const decoded = nip19.decode(pubkey);
+            const decoded = nip19.decode(pubkey) as unknown as { type: string; data: string };
             if (decoded.type === 'npub') {
               return decoded.data;
             }
@@ -832,8 +846,9 @@
         getKind24RelaySet(senderPubkey, recipientPubkey)
       );
       
-      Promise.all(relaySetPromises).then(relaySets => {
+      const relaySets = await Promise.all(relaySetPromises);
       console.log("[Relay Effect] Received relay sets:", relaySets);
+      
       // Combine and deduplicate all relay sets
       const allRelays = relaySets.flat();
       const uniqueRelays = [...new Set(allRelays)];
@@ -847,17 +862,13 @@
       } else {
         newMessageRelays = uniqueRelays;
       }
-      }).catch(error => {
+    } catch (error) {
       console.error("[Relay Effect] Error getting relay set:", error);
       console.log("[Relay Effect] Using fallback relays due to error");
       const fallbackRelays = getAvailableRelays();
       newMessageRelays = fallbackRelays.slice(0, 5);
-      });
-    } else {
-      console.log("[Relay Effect] Clearing relays - no recipients or sender");
-      newMessageRelays = [];
     }
-  });
+  }
 </script>
 
 {#if isOwnProfile && $userStore.signedIn}

src/routes/+layout.svelte

@@ -19,17 +19,21 @@
   let summary =
     "Alexandria is a digital library, utilizing Nostr events for curated publications and wiki pages.";
 
-  // Reactive effect to log relay configuration when stores change
+  // AI-NOTE: Refactored to avoid blocking $effect with logging operations
-  $effect(() => {
+  // Reactive effect to log relay configuration when stores change - non-blocking approach
+  $effect.pre(() => {
     const inboxRelays = $activeInboxRelays;
     const outboxRelays = $activeOutboxRelays;
     
     // Only log if we have relays (not empty arrays)
     if (inboxRelays.length > 0 || outboxRelays.length > 0) {
+      // Defer logging to avoid blocking the reactive system
+      requestAnimationFrame(() => {
         console.log('🔌 Relay Configuration Updated:');
         console.log('📥 Inbox Relays:', inboxRelays);
         console.log('📤 Outbox Relays:', outboxRelays);
         console.log(`📊 Total: ${inboxRelays.length} inbox, ${outboxRelays.length} outbox`);
+      });
     }
   });
 

src/routes/events/+page.svelte

@@ -392,17 +392,21 @@ import CommentViewer from "$lib/components/CommentViewer.svelte";
 
 
 
-  // Reactive effect to log relay configuration when stores change
+  // AI-NOTE: Refactored to avoid blocking $effect with logging operations
-  $effect(() => {
+  // Reactive effect to log relay configuration when stores change - non-blocking approach
+  $effect.pre(() => {
     const inboxRelays = $activeInboxRelays;
     const outboxRelays = $activeOutboxRelays;
     
     // Only log if we have relays (not empty arrays)
     if (inboxRelays.length > 0 || outboxRelays.length > 0) {
+      // Defer logging to avoid blocking the reactive system
+      requestAnimationFrame(() => {
         console.log('🔌 Events Page - Relay Configuration Updated:');
         console.log('📥 Inbox Relays:', inboxRelays);
         console.log('📤 Outbox Relays:', outboxRelays);
         console.log(`📊 Total: ${inboxRelays.length} inbox, ${outboxRelays.length} outbox`);
+      });
     }
   });