improve load speed

apps/gui/src/lib/components/partials/RelayMap.svelte

@@ -10,8 +10,8 @@
 	  import { StateManager } from '@nostrwatch/nip66';
     
     export let relay: string;
-    export let monitors: Monitor[];
-    export let checks: Nip66Event[];
+    export let monitors: Writable<Monitor[]>
+    export let checks: Writable<Nip66Event[]>
     export let aggregate: any;
 
     let ready: boolean = false;
@@ -81,8 +81,10 @@
     }
   
     const setMonitor = (monitor: Monitor) => {
+      if(!monitor?.registration) return;
       const { dd } = monitor.registration
-      const monitorCheck: Nip66Event = checks.find( check => check.pubkey === monitor.pubkey )
+      const monitorCheck: Nip66Event | undefined = $checks.find( check => check.pubkey === monitor.pubkey )
+      if(!monitorCheck) return //console.warn(`${monitor.pubkey} could not find check data...`)
       const rtt = monitorCheck?.rtt || undefined
 
       //console.log('monitor data', monitor, monitor.pubkey, dd, monitorCheck, rtt)
@@ -114,7 +116,7 @@
   
     const setMonitors = async (): Promise<void> => {
       resetMonitors()
-      for ( const monitor of monitors) {
+      for ( const monitor of $monitors) {
         setMonitor(monitor)
       }
     }
@@ -204,9 +206,10 @@
     };
 
     
-    onMount( () => {
-      init()  
-    })
+    onMount(init)
+
+    monitors.subscribe(init)
+    checks.subscribe(init)
   </script>
 
   {#if ready === true}

apps/gui/src/lib/components/partials/relay-single/cards/CardMap.svelte

@@ -1,22 +1,27 @@
 <script lang="ts">
     import * as Card from '$lib/components/ui/card';
+	import type { Writable } from 'svelte/store';
 	import RelayMap from '../../RelayMap.svelte';
+	import type { Monitor, Nip66Event } from '@nostrwatch/nip66/models';
     
     export let relay: string;
-    export let monitors: any[]
-    export let checks: any[]
+    export let monitors: Writable<Monitor[]>
+    export let checks: Writable<Nip66Event[]>
     export let aggregate: any[]
 </script>
 
 
-{#if monitors.length && checks.length}
+
 <Card.Root class="relay-card">
     <Card.Header>
         <Card.Title>Checks Map</Card.Title>  
         <Card.Description>A map showing where monitors reported from</Card.Description>
     </Card.Header>  
     <Card.Content class="p--6">
+        {#if $monitors.length && $checks.length}
         <RelayMap {relay} {monitors} {checks} {aggregate} />
+        {:else}
+        <span class="block m-4">loading....</span>
+        {/if}
     </Card.Content>
 </Card.Root>
-{/if}

apps/gui/src/lib/components/partials/relay-single/cards/CardOperator.svelte

@@ -1,20 +1,15 @@
 
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
-    import { derived, writable, type Writable } from 'svelte/store';
     
     import * as Card from '$lib/components/ui/card';
 	import ProfileCompact from '$lib/components/partials/ProfileCompact.svelte';
 	
-	import { events, eventsArray, nip66 } from '$lib/stores';
+	import { nip66 } from '$lib/stores';
 
-	import { formatRelayUrl } from '$lib/utils/routing';
-	import type { PubkeyProfile } from '@nostrwatch/nip66/models/PubkeyProfile';
-	import type { PubkeyRelays } from '@nostrwatch/nip66/models/PubkeyRelays';
+	import type { PubkeyProfile, PubkeyRelays } from '@nostrwatch/nip66/models';
 	import { Monitor, Nip66Event } from '@nostrwatch/nip66/models';
 	import Badge from '$lib/components/ui/badge/badge.svelte';
-	import Nip66Check from '../../Nip66Check.svelte';
-	import type { IEvent } from '@nostrwatch/nip66/models/Event';
     import OperatorRelays from '../OperatorRelays.svelte';
 
     export let pubkey: string;
@@ -25,7 +20,6 @@
 
     let otherRelaysCount: number;
 
-
     const mount = async () => {
         if(!$nip66) return;
         await $nip66.ready();

apps/gui/src/routes/relays/[protocol]/[...relay]/+page.svelte

@@ -138,15 +138,16 @@
   const loadRelayData = async () => {
       reset();
       await nip66Ready()
+      loadNip11().then(loadOperatorMeta)
       if (!$isLivesyncing) {
-          const res = await $nip66?.services?.relay?.getRelayData(relayUrl);
-          if (!res) return;
-          const [data, mons] = res;
-          addEventsToStore(data);
-          monitors.set(Array.from(mons?.values() || new Set()));
+          $nip66?.services?.relay?.getRelayData(relayUrl).then( (res: any) => {
+            if (!res) return;
+            const [data, mons] = res;
+            addEventsToStore(data);
+            monitors.set(Array.from(mons?.values() || new Set()));
+          })
       }
-      await loadNip11();
-      await loadOperatorMeta();
+      
       loading = false;
       currentRelay = relayUrl;
   };
@@ -157,17 +158,37 @@
   };
 
   const loadOperatorMeta = async () => {
+    console.log('loadOperatorMeta')
+    const begin = Date.now();
       if (!operatorPubkey) return operatorMetaReady.set(true);
+      let count = 0
       const onevent = (event: IEvent) => {
-          if (event.kind === 0 && !$operatorProfile) {
-              operatorProfile.set(new PubkeyProfile(event));
+        console.log('loadOperatorMeta', 'event', count, Date.now() - begin)
+        count++;
+        if (event.kind === 0) {
+          if($operatorProfile === null) {
+            operatorProfile.set(new PubkeyProfile(event));
           }
-          if (event.kind === 10002 && !$operatorRelays) {
-              operatorRelays.set(new PubkeyRelays(event));
+          else if($operatorProfile && event?.created_at && $operatorProfile?.created_at && $operatorProfile!.created_at < event?.created_at) {
+            operatorProfile.set(new PubkeyProfile(event));
           }
+        }
+        if (event.kind === 10002 && !$operatorRelays) {
+          if($operatorRelays === null) {
+            operatorRelays.set(new PubkeyRelays(event));
+          }
+          else if($operatorRelays && event?.created_at && $operatorRelays?.created_at && $operatorRelays!.created_at < event?.created_at) {
+            operatorRelays.set(new PubkeyRelays(event));
+          }
+        }
       };
-      await $nip66?.services?.relay?.fetchOperatorMeta(operatorPubkey, { onevent });
+      const onevents = (events: IEvent[]) => events.forEach( onevent )
+      $nip66?.services?.relay?.fetchOperatorMeta(operatorPubkey, { onevent, onevents });
+      while($operatorProfile === null || $operatorRelays === null) {
+          await new Promise(resolve => setTimeout(resolve, 100));
+      }
       operatorMetaReady.set(true)
+      console.log('loadOperatorMeta', 'done', Date.now() - begin)
   };
 
   const mount = async () => {
@@ -318,7 +339,7 @@
                 <div>
                   {#if item === 'map'}
                     {#if CardMap}
-                      <CardMap relay={relayUrl} monitors={$monitors} checks={$checksrelay} aggregate={$relayAggregate} />
+                      <CardMap relay={relayUrl} {monitors} checks={checksrelay} aggregate={$relayAggregate} />
                     {:else}
                       <Skeleton class="h-48 w-full" />
                     {/if}

libraries/nip66/src/services/RelayService.ts

@@ -94,13 +94,15 @@ export class RelayService extends Service {
       { kinds: [0, 10002], authors: [pubkey] }
     ]
     const relays = this.userMetaRelays;
+    const priority = 1000;
     const options: WebsocketAdapterOptions = {
       cache: true,
       returnResults: true, 
       keepAlive: false,
-      stream: false
+      stream: true,
+      batch: 1,
     }
-    return this.fetch( { relays, filters, options }, callbacks );
+    return this.subscribe( { relays, filters, priority, options }, callbacks );
   }
 
   async monitorInstancesFromChecks(checks: Nip66Event[], type: 'map' | 'array' = 'map'): Promise<Map<string, Monitor> | Monitor[] | undefined> {
@@ -114,7 +116,8 @@ export class RelayService extends Service {
       cache: true,
       returnResults: true, 
       keepAlive: false,
-      stream: false
+      stream: false,
+      batch: 1
     }
     const onevent = (event: IEvent) => {
       this.monitors.manager.handleEvent(event)
@@ -128,7 +131,7 @@ export class RelayService extends Service {
         { onevent }
       )
     )}
-    await this.monitors.fetch( 
+    await this.monitors.subscribe( 
       { relays, filters, options },
       { onevent }
     )

libraries/nip66/src/services/Service.ts

@@ -80,6 +80,9 @@ export class Service {
   async subscribe(args: FetchOptions, callbacks?: SubscribeHandlers): Promise<IEvent[]> {
     await this.ready();
     let { filters, relays, options, hash } = args;
+    if(filters) {
+      this.fetchFromCache(filters, callbacks);
+    }
     if(!hash) {
       hash = deterministicHash(args)
     }