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,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="address">
|
<div class="address" ref="root">
|
||||||
<hash-badge :address="address" class="hash-badge" />
|
<hash-badge :address="address" class="hash-badge" />
|
||||||
<a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
|
<a v-if="isFile" :href="`/api/raw/${address}`">{{ address }}</a>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
import { ListingResult } from "@/types/base";
|
import { ListingResult } from "@/types/base";
|
||||||
import { fetcher } from "@/utils";
|
import { fetcher } from "@/utils";
|
||||||
import useSWRV from "swrv";
|
import useSWRV from "swrv";
|
||||||
import { computed, defineComponent } from "vue";
|
import { computed, defineComponent, onMounted, ref } from "vue";
|
||||||
import HashBadge from "./HashBadge.vue";
|
import HashBadge from "./HashBadge.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
@ -33,12 +33,23 @@ export default defineComponent({
|
||||||
},
|
},
|
||||||
resolve: {
|
resolve: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true,
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
setup(props) {
|
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>(
|
const { data: addressEntries } = useSWRV<ListingResult, unknown>(
|
||||||
() => `/api/obj/${props.address}`,
|
() => (visible.value && `/api/obj/${props.address}`) || null,
|
||||||
fetcher
|
fetcher
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -67,6 +78,7 @@ export default defineComponent({
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
root: rootEl,
|
||||||
inferredId,
|
inferredId,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
@ -80,6 +92,6 @@ export default defineComponent({
|
||||||
}
|
}
|
||||||
|
|
||||||
.hash-badge {
|
.hash-badge {
|
||||||
margin-right: .5em;
|
margin-right: 0.5em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue