From 9ea1462bcb2b1e0af22cde65dee2665b0f81a461 Mon Sep 17 00:00:00 2001 From: silberengel Date: Sun, 10 Aug 2025 15:11:55 +0200 Subject: [PATCH] Fixed reactivity inefficiency --- src/lib/components/Notifications.svelte | 65 +++++++++++++++---------- src/routes/+layout.svelte | 16 +++--- src/routes/events/+page.svelte | 16 +++--- 3 files changed, 58 insertions(+), 39 deletions(-) diff --git a/src/lib/components/Notifications.svelte b/src/lib/components/Notifications.svelte index fa8e8f4..f46607a 100644 --- a/src/lib/components/Notifications.svelte +++ b/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,32 +846,29 @@ getKind24RelaySet(senderPubkey, recipientPubkey) ); - Promise.all(relaySetPromises).then(relaySets => { - console.log("[Relay Effect] Received relay sets:", relaySets); - // Combine and deduplicate all relay sets - const allRelays = relaySets.flat(); - const uniqueRelays = [...new Set(allRelays)]; - console.log("[Relay Effect] Final relay list:", uniqueRelays); - - // If no relays found from NIP-65, use fallback relays - if (uniqueRelays.length === 0) { - console.log("[Relay Effect] No NIP-65 relays found, using fallback"); - const fallbackRelays = getAvailableRelays(); - newMessageRelays = fallbackRelays.slice(0, 5); // Limit to first 5 for performance - } else { - newMessageRelays = uniqueRelays; - } - }).catch(error => { - console.error("[Relay Effect] Error getting relay set:", error); - console.log("[Relay Effect] Using fallback relays due to error"); + 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)]; + console.log("[Relay Effect] Final relay list:", uniqueRelays); + + // If no relays found from NIP-65, use fallback relays + if (uniqueRelays.length === 0) { + console.log("[Relay Effect] No NIP-65 relays found, using fallback"); const fallbackRelays = getAvailableRelays(); - newMessageRelays = fallbackRelays.slice(0, 5); - }); - } else { - console.log("[Relay Effect] Clearing relays - no recipients or sender"); - newMessageRelays = []; + newMessageRelays = fallbackRelays.slice(0, 5); // Limit to first 5 for performance + } else { + newMessageRelays = uniqueRelays; + } + } 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); } - }); + } {#if isOwnProfile && $userStore.signedIn} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 1ae83af..3aae73f 100644 --- a/src/routes/+layout.svelte +++ b/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 - $effect(() => { + // AI-NOTE: Refactored to avoid blocking $effect with logging operations + // 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) { - console.log('🔌 Relay Configuration Updated:'); - console.log('📥 Inbox Relays:', inboxRelays); - console.log('📤 Outbox Relays:', outboxRelays); - console.log(`📊 Total: ${inboxRelays.length} inbox, ${outboxRelays.length} outbox`); + // 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`); + }); } }); diff --git a/src/routes/events/+page.svelte b/src/routes/events/+page.svelte index f37d5a8..fc86dc5 100644 --- a/src/routes/events/+page.svelte +++ b/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 - $effect(() => { + // AI-NOTE: Refactored to avoid blocking $effect with logging operations + // 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) { - 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`); + // 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`); + }); } });