From 20a4ba60dc1bcd7a62df71b9d2301c80f442dd49 Mon Sep 17 00:00:00 2001
From: AlejandroAkbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Mon, 16 Mar 2026 03:14:51 -0700
Subject: [PATCH] fix: sync vue virtual measurements after updates

---
 pages/posts/[domain].vue               | 17 ++++++++++++++---
 pages/premium/saved-posts/[domain].vue | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/pages/posts/[domain].vue b/pages/posts/[domain].vue
index ec982b6a..06ba5eb9 100644
--- a/pages/posts/[domain].vue
+++ b/pages/posts/[domain].vue
@@ -601,6 +601,7 @@
   const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
   const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+  const virtualItemEls: Ref<(HTMLElement | null)[]> = shallowRef([])
 
   // Next page loader
   watchEffect(() => {
@@ -636,8 +637,10 @@
   })
 
   // FIX: Remove when this issue is fixed - https://github.com/TanStack/virtual/issues/619#issuecomment-1969516091
-  const measureElement = (el) => {
-    nextTick(() => {
+  const measureAll = () => {
+    rowVirtualizer.value.measureElement(null)
+
+    virtualItemEls.value.forEach((el) => {
       if (!el) {
         return
       }
@@ -646,6 +649,14 @@
     })
   }
 
+  onMounted(() => {
+    measureAll()
+  })
+
+  onUpdated(() => {
+    measureAll()
+  })
+
   /**
    * SEO
    */
@@ -1009,7 +1020,7 @@
             <li
               v-for="virtualRow in virtualRows"
               :key="virtualRow.key"
-              :ref="measureElement"
+              ref="virtualItemEls"
               :data-index="virtualRow.index"
             >
               <!-- Next Pagination -->
diff --git a/pages/premium/saved-posts/[domain].vue b/pages/premium/saved-posts/[domain].vue
index f3fc62d4..fb0a66b3 100644
--- a/pages/premium/saved-posts/[domain].vue
+++ b/pages/premium/saved-posts/[domain].vue
@@ -503,6 +503,7 @@
   const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems())
 
   const totalSize = computed(() => rowVirtualizer.value.getTotalSize())
+  const virtualItemEls: Ref<(HTMLElement | null)[]> = shallowRef([])
 
   // Next page loader
   watchEffect(() => {
@@ -538,8 +539,10 @@
   })
 
   // FIX: Remove when this issue is fixed - https://github.com/TanStack/virtual/issues/619#issuecomment-1969516091
-  const measureElement = (el) => {
-    nextTick(() => {
+  const measureAll = () => {
+    rowVirtualizer.value.measureElement(null)
+
+    virtualItemEls.value.forEach((el) => {
       if (!el) {
         return
       }
@@ -548,6 +551,14 @@
     })
   }
 
+  onMounted(() => {
+    measureAll()
+  })
+
+  onUpdated(() => {
+    measureAll()
+  })
+
   /**
    * SEO
    */
@@ -805,7 +816,7 @@
             <li
               v-for="virtualRow in virtualRows"
               :key="virtualRow.key"
-              :ref="measureElement"
+              ref="virtualItemEls"
               :data-index="virtualRow.index"
             >
               <!-- Next Pagination -->