From d97beabf4a656e774c159d1e910732664e4a4654 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <guillaume.b.chau@gmail.com>
Date: Sun, 27 Nov 2022 14:12:25 +0100
Subject: [PATCH] fix: recycle scroller glitches (#174)

---
 components/account/AccountAvatar.vue      | 1 +
 components/common/CommonBlurhash.ts       | 1 +
 components/common/CommonPaginator.vue     | 8 +++++++-
 components/timeline/TimelinePaginator.vue | 2 +-
 4 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountAvatar.vue b/components/account/AccountAvatar.vue
index a295e984..4d7fa57d 100644
--- a/components/account/AccountAvatar.vue
+++ b/components/account/AccountAvatar.vue
@@ -8,6 +8,7 @@ defineProps<{
 
 <template>
   <img
+    :key="account.avatar"
     :src="account.avatar"
     :alt="account.username"
     loading="lazy"
diff --git a/components/common/CommonBlurhash.ts b/components/common/CommonBlurhash.ts
index 9c27fd0a..94e475bf 100644
--- a/components/common/CommonBlurhash.ts
+++ b/components/common/CommonBlurhash.ts
@@ -19,6 +19,7 @@ export default defineComponent({
 
     onMounted(() => {
       const img = document.createElement('img')
+      isLoaded.value = img.complete
       img.onload = () => {
         isLoaded.value = true
       }
diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index 4ae846d6..4b976d65 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -24,7 +24,13 @@ const { items, state, endAnchor, error } = usePaginator(paginator)
 <template>
   <div>
     <template v-if="virtualScroller">
-      <DynamicScroller v-slot="{ item, active }" :items="items" :min-item-size="200" page-mode>
+      <DynamicScroller
+        v-slot="{ item, active }"
+        :items="items"
+        :min-item-size="200"
+        :key-field="keyProp"
+        page-mode
+      >
         <slot :item="item" :active="active" />
       </DynamicScroller>
     </template>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index fb21e17b..7987ae40 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -11,7 +11,7 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator :paginator="paginator" virtual-scroller>
     <template #default="{ item, active }">
-      <DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.text]">
+      <DynamicScrollerItem :item="item" :active="active">
         <StatusCard
           :status="item"
           border="b base" py-3