From fd22f5770db3976cbba287a8a61d85dc6667cda3 Mon Sep 17 00:00:00 2001
From: Outvi V <git@outv.im>
Date: Tue, 3 Jun 2025 00:33:41 +0800
Subject: [PATCH] feat(page-editor.el.note): also add delayed load

---
 .../src/pages/page-editor/els/page-editor.el.note.vue  |  9 ++++++++-
 .../src/pages/page-editor/page-editor.blocks.vue       | 10 ++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
index 62cea2b56b..e6ee7f6b02 100644
--- a/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue
@@ -36,6 +36,7 @@ import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
 	modelValue: Misskey.entities.PageBlock & { type: 'note' };
+	index: number;
 }>();
 
 const emit = defineEmits<{
@@ -59,7 +60,13 @@ watch(id, async () => {
 		...props.modelValue,
 		note: id.value,
 	});
-	note.value = await retryOnThrottled(() => misskeyApi('notes/show', { noteId: id.value }));
+	const timeoutId = window.setTimeout(async () => {
+		note.value = await retryOnThrottled(() => misskeyApi('notes/show', { noteId: id.value }));
+	}, 500 * props.index); // rate limit is 2 reqs per sec
+
+	return () => {
+		window.clearTimeout(timeoutId);
+	}
 }, {
 	immediate: true,
 });
diff --git a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
index f191320180..8d7ba1a3ab 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.blocks.vue
@@ -5,10 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <Sortable :modelValue="modelValue" tag="div" itemKey="id" handle=".drag-handle" :group="{ name: 'blocks' }" :animation="150" :swapThreshold="0.5" @update:modelValue="v => emit('update:modelValue', v)">
-	<template #item="{element}">
+	<template #item="{element, index}">
 		<div :class="$style.item">
 			<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
-			<component :is="getComponent(element.type)" :modelValue="element" @update:modelValue="updateItem" @remove="() => removeItem(element)"/>
+			<component
+				:is="getComponent(element.type)"
+				:modelValue="element"
+				:index="index"
+				@update:modelValue="updateItem"
+				@remove="() => removeItem(element)"
+			/>
 		</div>
 	</template>
 </Sortable>