perf(frontend): introduce MkLazy for lazy loading

This commit is contained in:
syuilo 2023-12-15 15:37:19 +09:00
parent bd4d8694dd
commit eacc2040a1
3 changed files with 65 additions and 3 deletions

View File

@ -0,0 +1,53 @@
<!--
SPDX-FileCopyrightText: syuilo and other misskey contributors
SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
<div ref="rootEl" :class="$style.root">
<div v-if="!showing" :class="$style.placeholder"></div>
<slot v-else></slot>
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
const rootEl = shallowRef<HTMLDivElement>();
const showing = ref(false);
const observer = new IntersectionObserver(
(entries) => {
if (entries.some((entry) => entry.isIntersecting)) {
showing.value = true;
}
},
);
onMounted(() => {
nextTick(() => {
observer.observe(rootEl.value!);
});
});
onActivated(() => {
nextTick(() => {
observer.observe(rootEl.value!);
});
});
onBeforeUnmount(() => {
observer.disconnect();
});
</script>
<style lang="scss" module>
.root {
display: block;
}
.placeholder {
display: block;
min-height: 150px;
}
</style>

View File

@ -25,6 +25,7 @@ import MkPageHeader from './global/MkPageHeader.vue';
import MkSpacer from './global/MkSpacer.vue'; import MkSpacer from './global/MkSpacer.vue';
import MkFooterSpacer from './global/MkFooterSpacer.vue'; import MkFooterSpacer from './global/MkFooterSpacer.vue';
import MkStickyContainer from './global/MkStickyContainer.vue'; import MkStickyContainer from './global/MkStickyContainer.vue';
import MkLazy from './global/MkLazy.vue';
export default function(app: App) { export default function(app: App) {
for (const [key, value] of Object.entries(components)) { for (const [key, value] of Object.entries(components)) {
@ -53,6 +54,7 @@ export const components = {
MkSpacer: MkSpacer, MkSpacer: MkSpacer,
MkFooterSpacer: MkFooterSpacer, MkFooterSpacer: MkFooterSpacer,
MkStickyContainer: MkStickyContainer, MkStickyContainer: MkStickyContainer,
MkLazy: MkLazy,
}; };
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
@ -77,5 +79,6 @@ declare module '@vue/runtime-core' {
MkSpacer: typeof MkSpacer; MkSpacer: typeof MkSpacer;
MkFooterSpacer: typeof MkFooterSpacer; MkFooterSpacer: typeof MkFooterSpacer;
MkStickyContainer: typeof MkStickyContainer; MkStickyContainer: typeof MkStickyContainer;
MkLazy: typeof MkLazy;
} }
} }

View File

@ -128,12 +128,18 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo> <MkInfo v-else-if="$i && $i.id === user.id">{{ i18n.ts.userPagePinTip }}</MkInfo>
<template v-if="narrow"> <template v-if="narrow">
<MkLazy>
<XFiles :key="user.id" :user="user"/> <XFiles :key="user.id" :user="user"/>
</MkLazy>
<MkLazy>
<XActivity :key="user.id" :user="user"/> <XActivity :key="user.id" :user="user"/>
</MkLazy>
</template> </template>
<div v-if="!disableNotes"> <div v-if="!disableNotes">
<div style="margin-bottom: 8px;">{{ i18n.ts.featured }}</div> <div style="margin-bottom: 8px;">{{ i18n.ts.featured }}</div>
<MkLazy>
<MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/> <MkNotes :class="$style.tl" :noGap="true" :pagination="pagination"/>
</MkLazy>
</div> </div>
</div> </div>
</div> </div>