From 7c61b579394efba0d3e6cac60d4a4c8712c069fe Mon Sep 17 00:00:00 2001
From: dakkar <dakkar@thenautilus.net>
Date: Wed, 21 May 2025 18:27:39 +0100
Subject: [PATCH] make sure that the DynamicNote component is *not* computed

my current hypothesis to explain #1059:

- we have a timeline, with some notes
- a new note arrives on the websocket
- we replace the items in the pagination inside the timeline
- vue starts re-rendering the notes, using the `:key` values to know
  which ones to leave there and which ones to move / add / delete
- since DynamicNote is `computed`, every time vue needs to instantiate
  it, it does an `await`
- so if another note is waiting in the websocket buffer, it gets
  processed *while vue is rendering*
- processing the new note cause the `items` map (and the array
  computed from it) to be replaced
- at this point vue may well get a new iterator from the start of the
  new list of items, after it had already decided that the first few
  notes did not need to be changed
- which manifests as new notes appearing in the middle of the
  timeline!
- and after enough new notes have arrived, all the old notes are out
  of the items map, so their elements have all been deleted, and
  "normality" is restored

this makes sense in my head, let's see if this change actually fixes
the problem
---
 packages/frontend/src/components/DynamicNote.vue         | 8 ++++----
 packages/frontend/src/components/DynamicNoteDetailed.vue | 8 ++++----
 packages/frontend/src/components/DynamicNoteSimple.vue   | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/DynamicNote.vue b/packages/frontend/src/components/DynamicNote.vue
index a5008e9ddf..67707bfda9 100644
--- a/packages/frontend/src/components/DynamicNote.vue
+++ b/packages/frontend/src/components/DynamicNote.vue
@@ -23,10 +23,10 @@ import type MkNote from '@/components/MkNote.vue';
 import type SkNote from '@/components/SkNote.vue';
 import { prefer } from '@/preferences';
 
-const XNote = computed(() =>
-	prefer.r.noteDesign.value === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNote.vue'))
-		: defineAsyncComponent(() => import('@/components/SkNote.vue')),
+const XNote = defineAsyncComponent(() =>
+	prefer.s.noteDesign === 'misskey'
+	? import('@/components/MkNote.vue')
+	: import('@/components/SkNote.vue')
 );
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNote | typeof SkNote>>('rootEl');
diff --git a/packages/frontend/src/components/DynamicNoteDetailed.vue b/packages/frontend/src/components/DynamicNoteDetailed.vue
index 21bf00ccbe..8594db2328 100644
--- a/packages/frontend/src/components/DynamicNoteDetailed.vue
+++ b/packages/frontend/src/components/DynamicNoteDetailed.vue
@@ -20,10 +20,10 @@ import type MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import type SkNoteDetailed from '@/components/SkNoteDetailed.vue';
 import { prefer } from '@/preferences';
 
-const XNoteDetailed = computed(() =>
-	prefer.r.noteDesign.value === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNoteDetailed.vue'))
-		: defineAsyncComponent(() => import('@/components/SkNoteDetailed.vue')),
+const XNoteDetailed = defineAsyncComponent(() =>
+	prefer.s.noteDesign === 'misskey'
+	? import('@/components/MkNoteDetailed.vue')
+	: import('@/components/SkNoteDetailed.vue'),
 );
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteDetailed | typeof SkNoteDetailed>>('rootEl');
diff --git a/packages/frontend/src/components/DynamicNoteSimple.vue b/packages/frontend/src/components/DynamicNoteSimple.vue
index 7ca345ccfa..5eaeaf6c23 100644
--- a/packages/frontend/src/components/DynamicNoteSimple.vue
+++ b/packages/frontend/src/components/DynamicNoteSimple.vue
@@ -21,10 +21,10 @@ import type MkNoteSimple from '@/components/MkNoteSimple.vue';
 import type SkNoteSimple from '@/components/SkNoteSimple.vue';
 import { prefer } from '@/preferences';
 
-const XNoteSimple = computed(() =>
-	prefer.r.noteDesign.value === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNoteSimple.vue'))
-		: defineAsyncComponent(() => import('@/components/SkNoteSimple.vue')),
+const XNoteSimple = defineAsyncComponent(() =>
+	prefer.s.noteDesign === 'misskey'
+	? import('@/components/MkNoteSimple.vue')
+	: import('@/components/SkNoteSimple.vue'),
 );
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteSimple | typeof SkNoteSimple>>('rootEl');