ssb: Try harder to avoid a full re-render. It's disruptive.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&caGw+RHTGO/WBWQDiRRv/9/SDZPS3w8U4xNafZEQrYw=.sha256"
+	"previous": "&N69/NfCoe/HmdG5Hl/ulq/CDYLhDYzi50jbg2h3VPuc=.sha256"
 }

apps/ssb/tf-app.js

@@ -573,7 +573,7 @@ class TfElement extends LitElement {
 				style="position: static; top: 0; z-index: 10"
 			>
 				<button
-					class="w3-bar-item w3-button w3-circle w3-ripple"
+					class=${'w3-bar-item w3-button w3-circle w3-ripple' + (this.connections?.some(x => x.flags.one_shot) ? ' w3-spin' : '')}
 					@click=${this.refresh}
 				>
 					↻

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}`);
 	}

apps/ssb/tf-user.js

@@ -20,7 +20,7 @@ class TfUserElement extends LitElement {
 
 	render() {
 		let user = this.users[this.id];
-		let shape = user && user.follow_depth >= 2 ? 'w3-circle' : 'w3-round';
+		let shape = !user || user.follow_depth >= 2 ? 'w3-circle' : 'w3-round';
 		let image = html`<span
 			class=${'w3-theme-l4 ' + shape}
 			style="display: inline-block; width: 2em; height: 2em; text-align: center; line-height: 2em"