only load address ids if they're visible
This commit is contained in:
parent
f920989d7f
commit
215a4e3d10
1 changed files with 19 additions and 7 deletions
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue