optimization round 3, snappy af

src/components/relays/MapInteractive.vue

@@ -84,6 +84,10 @@
       this.geo = this.store.relays.geo
     },
     updated(){},
+    unmounted(){
+      console.log('unmounted', '$refs', this.$refs)
+      delete this.$refs.map
+    },
     props: {
       resultsProp: {
         type: Object,

src/components/relays/MapSummary.vue

@@ -81,6 +81,7 @@ export default defineComponent({
   },
   unmounted(){
     console.log('unmounted', '$refs', this.$refs)
+    delete this.$refs.map
   },
   updated(){},
   props: {

src/components/relays/RefreshComponent.vue

@@ -158,6 +158,7 @@ export default defineComponent({
     }
   },
   created(){
+    clearInterval(this.interval)
     // document.addEventListener('visibilitychange', this.handleVisibility, false)
   },
   unmounted(){
@@ -170,9 +171,7 @@ export default defineComponent({
     this.relays = this.store.relays.getAll
     this.lastUpdate = this.store.relays.lastUpdate
 
-    //console.log('last update', this.lastUpdate)
     
-    clearInterval(this.interval)
 
     //If user leaves page before processing completes, force invalidate cache
     //console.log('is processing?', this.store.relays.isProcessing)

src/components/relays/RelaysFind.vue

@@ -0,0 +1,113 @@
+<template>
+<div class="pt-5 px-1 sm:px-6 lg:px-8">
+    <div class="sm:flex sm:items-center">
+    <div class="sm:flex-auto text-left">
+        <h1 class="text-4xl capitalize font-semibold text-gray-900">
+            <span class="inline-flex rounded bg-green-800 text-sm px-2 py-1 text-white relative -top-2">
+                {{ relaysCount[activeSubsection] }}
+            </span>
+            {{ activeSubsection }} Relays
+        </h1>
+        <p class="mt-2 text-xl text-gray-700">
+            <!-- {{ store.layout.getActiveItem('relays/find') }} -->
+            {{ store.layout.getActiveItem('relays/find')?.description }}
+        </p>
+    </div>
+    <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+        <button 
+            @click="$router.push('/relays/add')" 
+            type="button" 
+            class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-m font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">
+            Add Relay
+        </button>
+    </div>
+    </div>
+    <div class="mt-8 flex flex-col">
+    <FindRelaysSubnav />
+    </div>
+    </div>
+
+    <div 
+    v-for="subsection in navSubsection"
+            :key="subsection.slug" > 
+
+        <!-- <div v-if="section.slug == activeSubsection"> -->
+        <div v-if="subsection.slug == activeSubsection">
+        <ListClearnet
+            :resultsProp="results"
+            :subsectionProp="subsection.slug"
+            v-bind:relaysCountProp="relaysCount"
+            /> 
+        </div>
+    </div>
+</template>
+<script>
+    //vue
+    import { defineComponent, toRefs } from 'vue'
+    import { setupStore } from '@/store'
+    //shared methods
+    import RelaysLib from '@/shared/relays-lib.js'
+    import { parseHash } from '@/shared/hash-router.js'
+
+    import FindRelaysSubnav from '@/components/relays/FindRelaysSubnav.vue'
+    import ListClearnet from '@/components/relays/ListClearnet.vue'
+
+    const localMethods = {}
+
+    export default defineComponent({
+      name: 'HomePage',
+
+      components: {
+        ListClearnet,
+        FindRelaysSubnav,
+      },
+
+      setup(props){
+        const {resultsProp: results} = toRefs(props)
+        return { 
+          store : setupStore(),
+          results: results
+        }
+      },
+
+      props: {
+        resultsProp: {
+          type: Object,
+          default: () => {}
+        }
+      },
+
+      data() {
+        return {
+          relays: [],
+          timeouts: {},
+          intervals: {},
+          relaysCount: {},
+          // activeSection: this.routeSection || this.store.layout.getActiveItem('relays')?.slug,
+          // activeSubsection: this.routeSubsection || this.store.layout.getActiveItem(`relays/${this.activeSection}`)?.slug,
+        }
+      },
+
+      updated(){},
+
+      beforeMount(){
+        this.routeSection = this.parseHash.section || false
+        this.routeSubsection = this.parseHash.subsection || false
+      },
+
+      async mounted() {
+        this.navSubsection.forEach( item => this.relaysCount[item.slug] = 0 ) //move this
+        // this.relaysMountNav()
+      },
+
+      computed: {
+        activeSection: function(){ return this.store.layout.getActiveItem('relays')?.slug },
+        activeSubsection: function(){ return this.store.layout.getActiveItem(`relays/${this.activeSection}`)?.slug },
+        navSubsection: function() { return this.store.layout.getNavGroup(`relays/${this.activeSection}`) || [] },
+        parseHash
+      },
+
+      methods: Object.assign(RelaysLib, localMethods), 
+
+    })
+</script>

src/components/relays/pages/RelaysHome.vue

@@ -8,57 +8,18 @@
     v-if="activeSection == 'find'" /> 
 
   <div id="wrapper" class="mx-auto max-w-7xl">  
-    <div v-show="activeSection == 'find'">
-      <div class="pt-5 px-1 sm:px-6 lg:px-8">
-        <div class="sm:flex sm:items-center">
-        <div class="sm:flex-auto text-left">
-            <h1 class="text-4xl capitalize font-semibold text-gray-900">
-                <span class="inline-flex rounded bg-green-800 text-sm px-2 py-1 text-white relative -top-2">
-                    {{ relaysCount[activeSubsection] }}
-                </span>
-                {{ activeSubsection }} Relays
-            </h1>
-            <p class="mt-2 text-xl text-gray-700">
-              <!-- {{ store.layout.getActiveItem('relays/find') }} -->
-              {{ store.layout.getActiveItem('relays/find')?.description }}
-            </p>
-        </div>
-        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
-            <button 
-              @click="$router.push('/relays/add')" 
-              type="button" 
-              class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-m font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto">
-              Add Relay
-            </button>
-        </div>
-        </div>
-        <div class="mt-8 flex flex-col">
-        <FindRelaysSubnav />
-        </div>
-      </div>
-
-      <div 
-        v-for="subsection in navSubsection"
-              :key="subsection.slug"> 
 
-          <!-- <div v-if="section.slug == activeSubsection"> -->
-          <div v-show="subsection.slug == activeSubsection">
-            <ListClearnet
+    <RelaysFind
       :resultsProp="results"
-              :subsectionProp="subsection.slug"
-              v-bind:relaysCountProp="relaysCount"
-              /> 
-          </div>
-      </div>
-    </div>
+      v-if="activeSection == 'find'" /> 
 
     <RelayStatistics
       :resultsProp="results"
-      v-show="activeSection == 'stats'" /> 
+      v-if="activeSection == 'stats'" /> 
     
     <MapInteractive
       :resultsProp="results"
-      v-show="activeSection == 'map'" /> 
+      v-if="activeSection == 'map'" /> 
     
     <div id="footer">
       <span class="credit">
@@ -79,8 +40,8 @@ import { parseHash } from '@/shared/hash-router.js'
 //components
 import MapSummary from '@/components/relays/MapSummary.vue'
 import SubnavComponent from '@/components/relays/SubnavComponent.vue'
-import FindRelaysSubnav from '@/components/relays/FindRelaysSubnav.vue'
-import ListClearnet from '@/components/relays/ListClearnet.vue'
+
+import RelaysFind from '@/components/relays/RelaysFind.vue'
 import RelayStatistics from '@/components/relays/RelayStatistics.vue'
 import MapInteractive from '@/components/relays/MapInteractive.vue'
 //data
@@ -106,10 +67,9 @@ export default defineComponent({
   name: 'HomePage',
 
   components: {
-    MapSummary,
-    ListClearnet,
     SubnavComponent,
-    FindRelaysSubnav,
+    MapSummary,
+    RelaysFind,
     RelayStatistics,
     MapInteractive
   },
@@ -142,6 +102,11 @@ export default defineComponent({
 
   updated(){},
 
+  unmounted(){
+    console.log('findrelays', 'unmounted()')
+    delete this.results
+  },
+
   beforeMount(){
     this.routeSection = this.parseHash.section || false
     this.routeSubsection = this.parseHash.subsection || false

src/shared/relays-lib.js

@@ -37,12 +37,6 @@ export default {
       return this.$storage.removeStorageSync(key)
     },
 
-    cleanUrl: function(relay){
-      return relay.replace('wss://', '')
-    },
-
-   
-
     //   if(store)
     //     instance = this.storage.setStorage(store)
 

vue.config.js

@@ -13,9 +13,6 @@ module.exports = defineConfig({
         chunks: "all",
       },
     },
-    externals: {
-      vue: 'Vue'
-    }
     resolve: {
       fallback: {
         "fs": false,