From f1fbd4d596d7435a11ee93909b7bb4615a42e232 Mon Sep 17 00:00:00 2001
From: mircearoata <mircearoatapalade@gmail.com>
Date: Wed, 15 May 2024 20:36:28 +0200
Subject: [PATCH] Replace custom virtual scroll with library for better resize
 performance

---
 frontend/package.json                         |   1 +
 frontend/pnpm-lock.yaml                       |  16 +++
 .../src/lib/components/VirtualList.svelte     | 112 ++++++------------
 .../lib/components/mods-list/ModsList.svelte  |   6 +-
 4 files changed, 55 insertions(+), 80 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index f6b212cb..609735f9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
     "@graphql-typed-document-node/core": "^3.2.0",
     "@lukeed/uuid": "^2.0.1",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tanstack/svelte-virtual": "^3.5.0",
     "@urql/exchange-graphcache": "^6.4.0",
     "@urql/exchange-persisted": "^4.1.1",
     "@urql/svelte": "^4.0.4",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index cc0c6c88..5bb6d0d1 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -20,6 +20,9 @@ dependencies:
   '@tailwindcss/container-queries':
     specifier: ^0.1.1
     version: 0.1.1(tailwindcss@3.3.6)
+  '@tanstack/svelte-virtual':
+    specifier: ^3.5.0
+    version: 3.5.0(svelte@4.2.8)
   '@urql/exchange-graphcache':
     specifier: ^6.4.0
     version: 6.4.0(graphql@16.8.1)
@@ -2498,6 +2501,19 @@ packages:
       tailwindcss: 3.3.6
     dev: false
 
+  /@tanstack/svelte-virtual@3.5.0(svelte@4.2.8):
+    resolution: {integrity: sha512-9fgqDeYV+5WBv/jar67Oy5Ddg3kbz43dPRHrIRk/dE9QinI4aCnWwM8VrjK7DDcw9zWAyj6BVC3miLMwyLNbAw==}
+    peerDependencies:
+      svelte: ^3.48.0 || ^4.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.5.0
+      svelte: 4.2.8
+    dev: false
+
+  /@tanstack/virtual-core@3.5.0:
+    resolution: {integrity: sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==}
+    dev: false
+
   /@tsconfig/svelte@5.0.2:
     resolution: {integrity: sha512-BRbo1fOtyVbhfLyuCWw6wAWp+U8UQle+ZXu84MYYWzYSEB28dyfnRBIE99eoG+qdAC0po6L2ScIEivcT07UaMA==}
     dev: true
diff --git a/frontend/src/lib/components/VirtualList.svelte b/frontend/src/lib/components/VirtualList.svelte
index ec558891..2da089c2 100644
--- a/frontend/src/lib/components/VirtualList.svelte
+++ b/frontend/src/lib/components/VirtualList.svelte
@@ -1,100 +1,54 @@
 <script generics="T" lang="ts">
+  import { createVirtualizer } from '@tanstack/svelte-virtual';
   import _ from 'lodash';
-  import { tick } from 'svelte';
 
   // eslint-disable-next-line no-undef
   export let items: T[];
-  export let itemHeight: number | undefined = undefined;
-  export let bench = 10;
+  export let itemHeight: number;
+  export let overscan = 5;
   let clazz = '';
   export { clazz as class };
-  export let containerClass = '';
-
-  let start = 0;
-  let end = 10;
-
-  let viewport: HTMLElement;
-  let container: HTMLElement;
-  let heightMap: number[] = [];
+  export let itemClass = '';
   
-  $: {
-    heightMap = Array.from({ length: items.length });
-    if(viewport && container && items.length > 0) {
-      tick().then(updateVisible);
-    }
-  }
-
-  function updateHeightMap() {
-    const virtualRows = Array.from(container?.children ?? []);
-    virtualRows.forEach((elem, idx) => {
-      heightMap[start + idx] = elem.clientHeight;
-    });
-  }
+  let virtualListEl: HTMLDivElement;
 
-  $: knownHeights = heightMap.filter((x) => !!x);
-  $: averageHeight = knownHeights.reduce((acc, curr) => acc + curr, 0) / knownHeights.length;
+  $: virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    count: items.length,
+    getScrollElement: () => virtualListEl,
+    estimateSize: () => itemHeight ?? 100,
+    overscan,
+  });
 
-  function getHeight(item: number): number {
-    return heightMap[item] ?? (itemHeight ?? averageHeight);
-  }
-
-  let viewportHeight: number;
-
-  $: if(viewport) {
-    // Add or remove elements when the viewport height changes
-    viewportHeight;
-    items;
-    updateVisible();
-  }
-
-  async function updateVisible() {
-    const { scrollTop } = viewport;
-
-    updateHeightMap();
-    
-    let height = 0;
-    let newStart = 0;
-    while(newStart < items.length && height + getHeight(newStart) < scrollTop) {
-      height += getHeight(newStart);
-      newStart++;
-    }
-
-    let newEnd = newStart;
-    while(newEnd < items.length && height < scrollTop + viewport.clientHeight) {
-      height += getHeight(newEnd);
-      newEnd++;
-    }
-
-    start = Math.max(newStart - bench, 0);
-    end = Math.min(newEnd + bench, items.length);
-  }
-
-  $: top = _.range(0, start).map(getHeight).reduce((acc, curr) => acc + curr, 0);
-  $: bottom = _.range(end, items.length).map(getHeight).reduce((acc, curr) => acc + curr, 0);
-  $: visibleItems = items.map((data, index) => ({ index, data })).slice(start, end);
-
-  function itemCreated(_element: HTMLElement) {
-    updateHeightMap();
+  $: vitems = $virtualizer.getVirtualItems();
+  
+  let virtualItemEls: HTMLDivElement[] = [];
+  $: if (virtualItemEls.length) {
+    virtualItemEls.forEach((el) => $virtualizer.measureElement(el));
   }
 </script>
 
 <div
-  bind:this={viewport}
+  bind:this={virtualListEl}
   style="overflow-anchor: none"
   class="relative overflow-y-scroll h-full {clazz}"
-  bind:offsetHeight={viewportHeight}
-  on:scroll={updateVisible}
 >
   <div
-    bind:this={container}
-    style:padding-top="{top}px"
-    style:padding-bottom="{bottom}px"
-    class="overflow-hidden {containerClass}"
+    style="height: {$virtualizer.getTotalSize()}px; width: 100%;"
+    class="overflow-hidden"
   >
-    {#each visibleItems as item (item.index)}
-      <div class="overflow-hidden" use:itemCreated>
-        <slot item={item.data}>Missing template</slot>
-      </div>
-    {/each}
+    <div
+      style="transform: translateY({vitems[0]
+        ? vitems[0].start - $virtualizer.options.scrollMargin
+        : 0}px);"
+      class="absolute top-0 left-0 w-full overflow-hidden"
+    >
+      {#each vitems as row, idx (row.index)}
+        <div
+          bind:this={virtualItemEls[idx]}
+          class="overflow-hidden {itemClass}">
+          <slot item={items[row.index]}>Missing template</slot>
+        </div>
+      {/each}
+    </div>
   </div>
 </div>
diff --git a/frontend/src/lib/components/mods-list/ModsList.svelte b/frontend/src/lib/components/mods-list/ModsList.svelte
index baf185f3..6a5fa790 100644
--- a/frontend/src/lib/components/mods-list/ModsList.svelte
+++ b/frontend/src/lib/components/mods-list/ModsList.svelte
@@ -193,7 +193,11 @@
             {/if}
           </div>
         {:else}
-          <VirtualList containerClass="mx-4" items={displayMods} let:item={mod}>
+          <VirtualList
+            itemClass="mx-4"
+            itemHeight={84}
+            items={displayMods}
+            let:item={mod}>
             <ModsListItem
               {mod}
               selected={$expandedMod == mod.mod_reference}