From 0d597721bf50f859e4be5b38f7c19a9f72b0cecc Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sun, 12 Jan 2025 12:01:52 -0500
Subject: [PATCH] ssb: Try harder to avoid a full re-render.  It's disruptive.

---
 apps/ssb.json                |  2 +-
 apps/ssb/tf-tab-news-feed.js | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/ssb.json b/apps/ssb.json
index eaa5668f..28f31422 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&xWW9fuitFr6jFhe4fopPq2Zuu08ZBzHoKjFAAPx2a/U=.sha256"
+	"previous": "&N69/NfCoe/HmdG5Hl/ulq/CDYLhDYzi50jbg2h3VPuc=.sha256"
 }
diff --git a/apps/ssb/tf-tab-news-feed.js b/apps/ssb/tf-tab-news-feed.js
index c5fbf6cc..ee8d0461 100644
--- a/apps/ssb/tf-tab-news-feed.js
+++ b/apps/ssb/tf-tab-news-feed.js
@@ -274,6 +274,11 @@ class TfTabNewsFeedElement extends LitElement {
 		return result;
 	}
 
+	merge_messages(old_messages, new_messages) {
+		let old_by_id = Object.fromEntries(old_messages.map(x => [x.id, x]));
+		return new_messages.map(x => old_by_id[x.id] ? old_by_id[x.id] : x);
+	}
+
 	async load_latest() {
 		this.loading++;
 		let now = new Date().valueOf();
@@ -293,14 +298,14 @@ class TfTabNewsFeedElement extends LitElement {
 		} finally {
 			this.loading--;
 		}
-		this.messages = Object.values(
+		this.messages = this.merge_messages(this.messages, Object.values(
 			Object.fromEntries(
 				[...this.messages, ...messages]
 					.sort((x, y) => x.timestamp - y.timestamp)
 					.slice(-1024)
 					.map((x) => [x.id, x])
 			)
-		);
+		));
 		console.log('done loading latest messages.');
 	}
 
@@ -309,8 +314,10 @@ class TfTabNewsFeedElement extends LitElement {
 		this.loading++;
 		let messages = [];
 		try {
-			this.messages = [];
-			this._messages_hash = this.hash;
+			if (this._messages_hash !== this.hash) {
+				this.messages = [];
+				this._messages_hash = this.hash;
+			}
 			this._messages_following = this.following;
 			let now = new Date().valueOf();
 			let start_time = now - 24 * 60 * 60 * 1000;
@@ -345,7 +352,7 @@ class TfTabNewsFeedElement extends LitElement {
 		} finally {
 			this.loading--;
 		}
-		this.messages = messages;
+		this.messages = this.merge_messages(this.messages, messages);
 		this.time_loading = undefined;
 		console.log(`loading messages done for ${self.whoami}`);
 	}