From 215a4e3d10202a8f661d90070ef2761719fb59e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sun, 28 Mar 2021 22:19:58 +0200
Subject: [PATCH] only load address ids if they're visible

---
 ui/src/components/Address.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/Address.vue b/ui/src/components/Address.vue
index ceaee34..814ddf2 100644
--- a/ui/src/components/Address.vue
+++ b/ui/src/components/Address.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="address">
-    <hash-badge :address="address" class="hash-badge"/>
+  <div class="address" ref="root">
+    <hash-badge :address="address" class="hash-badge" />
     <a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
     <template v-else>
       <router-link v-if="link" :to="{ name: 'inspect', params: { address } }">
@@ -15,7 +15,7 @@
 import { ListingResult } from "@/types/base";
 import { fetcher } from "@/utils";
 import useSWRV from "swrv";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, onMounted, ref } from "vue";
 import HashBadge from "./HashBadge.vue";
 
 export default defineComponent({
@@ -33,12 +33,23 @@ export default defineComponent({
     },
     resolve: {
       type: Boolean,
-      default: true
-    }
+      default: true,
+    },
   },
   setup(props) {
+    const rootEl = ref<HTMLElement | undefined>();
+    const visible = ref(false);
+    const observer = new IntersectionObserver((entries) => {
+      visible.value = entries.some((entry) => entry.isIntersecting);
+    });
+    onMounted(() => {
+      if (rootEl.value) {
+        observer.observe(rootEl.value);
+      }
+    });
+
     const { data: addressEntries } = useSWRV<ListingResult, unknown>(
-      () => `/api/obj/${props.address}`,
+      () => (visible.value && `/api/obj/${props.address}`) || null,
       fetcher
     );
 
@@ -67,6 +78,7 @@ export default defineComponent({
     });
 
     return {
+      root: rootEl,
       inferredId,
     };
   },
@@ -80,6 +92,6 @@ export default defineComponent({
 }
 
 .hash-badge {
-  margin-right: .5em;
+  margin-right: 0.5em;
 }
 </style>