slightly improve observer-based resolving

ui/src/components/Address.vue

@@ -46,27 +46,14 @@ export default defineComponent({
     },
   },
   setup(props) {
-    // Enable IntersectionObserver for performance reasons
-    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);
-      }
-    });
-
     // Identification
-    const { attributes } = useEntity(props.address, () => visible.value);
+    const { attributes } = useEntity(props.address, () => props.resolve);
     const inferredEntries = identify(attributes);
     const inferredIds: ComputedRef<string[]> = computed(() => {
       return inferredEntries.value.map((eid) => eid.value);
     });
 
     return {
-      root: rootEl,
       inferredIds,
     };
   },

ui/src/components/widgets/Table.vue

@@ -23,6 +23,13 @@
             link
             v-if="entry.value.t === 'Address'"
             :address="entry.value.c"
+            :resolve="Boolean(resolve[id])"
+            :data-id="id"
+            :ref="
+              (el) => {
+                if (el) addressEls.push(el);
+              }
+            "
           />
           <template v-else>
             <Marquee>
@@ -50,7 +57,14 @@
 import Address from "@/components/Address.vue";
 import Marquee from "@/components/Marquee.vue";
 import { AttributeChange, IEntry } from "@/types/base";
-import { defineComponent, PropType } from "vue";
+import {
+  defineComponent,
+  onMounted,
+  PropType,
+  reactive,
+  ref,
+  watchEffect,
+} from "vue";
 
 export default defineComponent({
   name: "Table",
@@ -79,6 +93,30 @@ export default defineComponent({
       newEntryValue: "",
     };
   },
+  setup(props) {
+    // Enable IntersectionObserver for performance reasons
+    const addressEls = ref<InstanceType<typeof Address>[]>([]);
+    const resolve = reactive<{ [key: string]: boolean }>({});
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        const id = (entry.target as HTMLElement).dataset["id"];
+        if (id) resolve[id] = entry.isIntersecting;
+      });
+    });
+
+    onMounted(() => {
+      watchEffect(() => {
+        addressEls.value.forEach((el: InstanceType<typeof Address>) => {
+          observer.observe(el.$el);
+        });
+      });
+    });
+
+    return {
+      addressEls,
+      resolve,
+    };
+  },
   methods: {
     async addEntry() {
       this.$emit("edit", {