merge: Add delay and retry to Page's embedded note loading (!1072)

View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1072

Closes #853

Approved-by: Hazelnoot <acomputerdog@gmail.com>
Approved-by: dakkar <dakkar@thenautilus.net>

packages/frontend/src/pages/page-editor/els/page-editor.el.note.vue

@@ -25,6 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 /* eslint-disable vue/no-mutating-props */
 import { watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
+import { retryOnThrottled } from '@@/js/retry-on-throttled.js';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -35,6 +36,7 @@ import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
 	modelValue: Misskey.entities.PageBlock & { type: 'note' };
+	index: number;
 }>();
 
 const emit = defineEmits<{
@@ -58,7 +60,13 @@ watch(id, async () => {
 		...props.modelValue,
 		note: id.value,
 	});
-	note.value = await 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,
 });

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>