only load address ids if they're visible

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>