From 9a749fe8402392a88effc4bf69ee58cec7660447 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=AA=E7=8C=AB?= <SnowCait@users.noreply.github.com>
Date: Fri, 15 Nov 2024 08:26:58 +0900
Subject: [PATCH] Revert "Replace svelte-virtual-scroll-list to CSS
 content-visibility"

---
 web/package-lock.json                    | 10 ++++++++++
 web/package.json                         |  1 +
 web/src/routes/(app)/TimelineView.svelte | 13 ++++++-------
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/package-lock.json b/web/package-lock.json
index 1af5ba79e..f79a736ac 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -49,6 +49,7 @@
 				"prettier-plugin-svelte": "^3.2.6",
 				"svelte": "^4.2.19",
 				"svelte-check": "^3.8.6",
+				"svelte-virtual-scroll-list": "^1.3.0",
 				"tslib": "^2.7.0",
 				"typescript": "^5.5.4",
 				"vite": "^5.4.3",
@@ -4820,6 +4821,15 @@
 				"svelte": "^4.0.0"
 			}
 		},
+		"node_modules/svelte-virtual-scroll-list": {
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/svelte-virtual-scroll-list/-/svelte-virtual-scroll-list-1.3.0.tgz",
+			"integrity": "sha512-rkU993mMsTboFRlygExhYeLJwysaFxyzfTsAfOtDklGIyd0wB31eZtYSAHAcz/WaZCEwjn+GKXfx5jM1xUv3GQ==",
+			"dev": true,
+			"peerDependencies": {
+				"svelte": ">=3.5.0"
+			}
+		},
 		"node_modules/svelte/node_modules/estree-walker": {
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
diff --git a/web/package.json b/web/package.json
index 65584a2fe..58d94e787 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,6 +34,7 @@
 		"prettier-plugin-svelte": "^3.2.6",
 		"svelte": "^4.2.19",
 		"svelte-check": "^3.8.6",
+		"svelte-virtual-scroll-list": "^1.3.0",
 		"tslib": "^2.7.0",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3",
diff --git a/web/src/routes/(app)/TimelineView.svelte b/web/src/routes/(app)/TimelineView.svelte
index e978b5255..3d9359e63 100644
--- a/web/src/routes/(app)/TimelineView.svelte
+++ b/web/src/routes/(app)/TimelineView.svelte
@@ -2,6 +2,7 @@
 	import { writable } from 'svelte/store';
 	import { onMount } from 'svelte';
 	import { nip19, type Event } from 'nostr-tools';
+	import { VirtualScroll } from 'svelte-virtual-scroll-list';
 	import { goto } from '$app/navigation';
 	import type { Item } from '$lib/Items';
 	import { channelIdStore } from '$lib/Channel';
@@ -109,16 +110,16 @@
 <svelte:window bind:innerHeight bind:scrollY={$scrollY} />
 
 <section class="card">
-	{#each visibleItems as item}
+	<VirtualScroll data={visibleItems} key="id" let:data pageMode={true} keeps={50}>
 		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class={canTransition ? 'canTransition-post' : ''}
-			class:related={$author?.isNotified(item.event)}
-			on:mouseup={(e) => viewDetail(e, item.event)}
+			class:related={$author?.isNotified(data.event)}
+			on:mouseup={(e) => viewDetail(e, data.event)}
 		>
-			<EventComponent {item} {readonly} {createdAtFormat} {full} />
+			<EventComponent item={data} {readonly} {createdAtFormat} {full} />
 		</div>
-	{/each}
+	</VirtualScroll>
 </section>
 
 {#if showLoading}
@@ -139,8 +140,6 @@
 
 		overflow-x: hidden;
 		text-overflow: ellipsis;
-
-		content-visibility: auto;
 	}
 
 	.canTransition-post {