From d647daae0e9b6bf7554ed5c5d8010b9392ad8c4f Mon Sep 17 00:00:00 2001
From: Hazelnoot <acomputerdog@gmail.com>
Date: Sun, 13 Apr 2025 19:27:44 -0400
Subject: [PATCH] factor out SkLazy

---
 .../frontend/src/components/global/MkLazy.vue | 10 +++-
 .../frontend/src/components/global/SkLazy.vue | 57 -------------------
 .../frontend/src/pages/following-feed.vue     | 16 +++---
 3 files changed, 16 insertions(+), 67 deletions(-)
 delete mode 100644 packages/frontend/src/components/global/SkLazy.vue

diff --git a/packages/frontend/src/components/global/MkLazy.vue b/packages/frontend/src/components/global/MkLazy.vue
index c2be975c8c..595abb5e48 100644
--- a/packages/frontend/src/components/global/MkLazy.vue
+++ b/packages/frontend/src/components/global/MkLazy.vue
@@ -16,6 +16,8 @@ import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, useTemplateRef
 const rootEl = useTemplateRef('rootEl');
 const showing = ref(false);
 
+defineExpose({ rootEl, showing });
+
 const emit = defineEmits<{
 	(ev: 'show'): void,
 }>();
@@ -36,13 +38,17 @@ const observer = new IntersectionObserver(
 
 onMounted(() => {
 	nextTick(() => {
-		observer.observe(rootEl.value!);
+		if (rootEl.value) {
+			observer.observe(rootEl.value);
+		}
 	});
 });
 
 onActivated(() => {
 	nextTick(() => {
-		observer.observe(rootEl.value!);
+		if (rootEl.value) {
+			observer.observe(rootEl.value);
+		}
 	});
 });
 
diff --git a/packages/frontend/src/components/global/SkLazy.vue b/packages/frontend/src/components/global/SkLazy.vue
deleted file mode 100644
index 40add97db7..0000000000
--- a/packages/frontend/src/components/global/SkLazy.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<!-- Based on MkLazy.vue -->
-
-<template>
-<div ref="rootEl" :class="$style.root">
-	<slot v-if="showing"></slot>
-	<div v-else :class="$style.placeholder"></div>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { nextTick, onMounted, onActivated, onBeforeUnmount, ref, shallowRef } from 'vue';
-
-const rootEl = shallowRef<HTMLDivElement>();
-const showing = ref(false);
-
-defineExpose({ rootEl, showing });
-
-const observer = new IntersectionObserver(entries =>
-	showing.value = entries.some((entry) => entry.isIntersecting),
-);
-
-onMounted(() => {
-	nextTick(() => {
-		if (rootEl.value) {
-			observer.observe(rootEl.value);
-		}
-	});
-});
-
-onActivated(() => {
-	nextTick(() => {
-		if (rootEl.value) {
-			observer.observe(rootEl.value);
-		}
-	});
-});
-
-onBeforeUnmount(() => {
-	observer.disconnect();
-});
-</script>
-
-<style lang="scss" module>
-.root {
-	display: block;
-}
-
-.placeholder {
-	display: block;
-	min-height: 150px;
-}
-</style>
diff --git a/packages/frontend/src/pages/following-feed.vue b/packages/frontend/src/pages/following-feed.vue
index c05c619119..bcf6528dd1 100644
--- a/packages/frontend/src/pages/following-feed.vue
+++ b/packages/frontend/src/pages/following-feed.vue
@@ -16,16 +16,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkHorizontalSwipe>
 	</div>
 
-	<SkLazy ref="userScroll" :class="$style.user">
+	<MkLazy ref="userScroll" :class="$style.user">
 		<MkHorizontalSwipe v-if="selectedUserId" v-model:tab="userList" :tabs="headerTabs">
 			<SkUserRecentNotes ref="userRecentNotes" :userId="selectedUserId" :withNonPublic="withNonPublic" :withQuotes="withQuotes" :withBots="withBots" :withReplies="withReplies" :onlyFiles="onlyFiles"/>
 		</MkHorizontalSwipe>
-	</SkLazy>
+	</MkLazy>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, shallowRef } from 'vue';
+import { computed, ref, useTemplateRef } from 'vue';
 import type { ComputedRef, Ref } from 'vue';
 import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import type { PageHeaderItem } from '@/types/page-header.js';
@@ -34,11 +34,11 @@ import MkHorizontalSwipe from '@/components/MkHorizontalSwipe.vue';
 import MkPageHeader from '@/components/global/MkPageHeader.vue';
 import SkUserRecentNotes from '@/components/SkUserRecentNotes.vue';
 import { createModel, createHeaderItem, followingFeedTabs, followingTabIcon, followingTabName, followingTab } from '@/utility/following-feed-utils.js';
-import SkLazy from '@/components/global/SkLazy.vue';
 import SkFollowingRecentNotes from '@/components/SkFollowingRecentNotes.vue';
 import SkRemoteFollowersWarning from '@/components/SkRemoteFollowersWarning.vue';
 import { useRouter } from '@/router';
 import { definePage } from '@/page';
+import MkLazy from '@/components';
 
 const model = createModel();
 const {
@@ -52,10 +52,10 @@ const {
 
 const router = useRouter();
 
-const userRecentNotes = shallowRef<InstanceType<typeof SkUserRecentNotes>>();
-const followingRecentNotes = shallowRef<InstanceType<typeof SkFollowingRecentNotes>>();
-const userScroll = shallowRef<InstanceType<typeof SkLazy>>();
-const noteScroll = shallowRef<HTMLElement>();
+const userRecentNotes = useTemplateRef('userRecentNotes');
+const followingRecentNotes = useTemplateRef('followingRecentNotes');
+const userScroll = useTemplateRef('userScroll');
+const noteScroll = useTemplateRef('noteScroll');
 
 const selectedUserId: Ref<string | null> = ref(null);