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

@@ -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(() =>
+const XNote = defineAsyncComponent(() =>
-	prefer.r.noteDesign.value === 'misskey'
+	prefer.s.noteDesign === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNote.vue'))
+	? import('@/components/MkNote.vue')
-		: defineAsyncComponent(() => import('@/components/SkNote.vue')),
+	: import('@/components/SkNote.vue')
 );
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNote | typeof SkNote>>('rootEl');

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(() =>
+const XNoteDetailed = defineAsyncComponent(() =>
-	prefer.r.noteDesign.value === 'misskey'
+	prefer.s.noteDesign === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNoteDetailed.vue'))
+	? import('@/components/MkNoteDetailed.vue')
-		: defineAsyncComponent(() => import('@/components/SkNoteDetailed.vue')),
+	: import('@/components/SkNoteDetailed.vue'),
 );
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteDetailed | typeof SkNoteDetailed>>('rootEl');

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(() =>
+const XNoteSimple = defineAsyncComponent(() =>
-	prefer.r.noteDesign.value === 'misskey'
+	prefer.s.noteDesign === 'misskey'
-		? defineAsyncComponent(() => import('@/components/MkNoteSimple.vue'))
+	? import('@/components/MkNoteSimple.vue')
-		: defineAsyncComponent(() => import('@/components/SkNoteSimple.vue')),
+	: import('@/components/SkNoteSimple.vue'),
 );
 
 const rootEl = useTemplateRef<ComponentExposed<typeof MkNoteSimple | typeof SkNoteSimple>>('rootEl');