feat: ditch triplit, move to postgresql + drizzle orm

app/components/RowVirtualizerDynamic.vue

@@ -21,7 +21,28 @@ const updateScrollMargin = () => {
     }
 };
 
-const resizeObserver = new ResizeObserver(updateScrollMargin);
+const rowVirtualizer = useVirtualizer(computed(() => ({
+    count: props.items.length,
+    getScrollElement: () => props.scrollElement,
+    estimateSize: () => props.minItemSize,
+    overscan: props.overscan,
+    scrollMargin: scrollMargin.value,
+    getItemKey: (index: number) => props.keyField ? props.items[index]?.[props.keyField] || index : index,
+})));
+
+const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
+const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
+
+let resizeRafId: number | undefined = undefined;
+const resizeObserver = new ResizeObserver(() => {
+    if (resizeRafId) return;
+
+    resizeRafId = requestAnimationFrame(() => {
+        resizeRafId = undefined;
+        rowVirtualizer.value.measure();
+        updateScrollMargin();
+    });
+});
 
 onMounted(() => {
     resizeObserver.observe(containerRef.value!);
@@ -32,29 +53,14 @@ onUnmounted(() => {
     resizeObserver.disconnect();
 });
 
-const rowVirtualizer = useVirtualizer(computed(() => ({
-    count: props.items.length,
-    getScrollElement: () => props.scrollElement,
-    estimateSize: () => props.minItemSize,
-    overscan: props.overscan,
-    scrollMargin: scrollMargin.value,
-    getItemKey: (index: number) => props.keyField ? props.items[index]?.[props.keyField] || index : index,
-    initialRect: {
-        width: 0,
-        height: props.prerender ? props.minItemSize * props.prerender : 0
-    },
-})));
 
-const virtualRows = computed(() => rowVirtualizer.value.getVirtualItems());
-const totalSize = computed(() => rowVirtualizer.value.getTotalSize());
 
-const measureElement = (el: Element) => {
-    if (!el) {
-        return
+// Keep the measure function simple
+const measureElement = (el: any) => {
+    if (el) {
+        rowVirtualizer.value.measureElement(el);
     }
-
-    rowVirtualizer.value.measureElement(el)
-}
+};
 
 watch(() => props.items, () => {
     rowVirtualizer.value.measure();
@@ -69,7 +75,7 @@ watch(() => props.items, () => {
                 top: 0,
                 left: 0,
                 width: '100%',
-                height: `${virtualRow.size}px`,
+                minHeight: `${virtualRow.size}px`,
                 transform: `translateY(${virtualRow.start - scrollMargin}px)`,
             }">
             <slot :item="props.items[virtualRow.index]" :index="virtualRow.index" />