From aa15da50abfb247e430e1421fb535f1d5696fab1 Mon Sep 17 00:00:00 2001
From: Cory McWilliams <cory@unprompted.com>
Date: Sat, 11 Jan 2025 14:09:42 -0500
Subject: [PATCH] ssb: Tried to do the right lit things to prevent unnecessary
 re-rendering.  Ended up doing a lazy JSON thing.

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

diff --git a/apps/ssb.json b/apps/ssb.json
index 99196bfd..a69876fe 100644
--- a/apps/ssb.json
+++ b/apps/ssb.json
@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&5YZ9ja1NymBZsDaHIrpgZCzn95R34Y1RQug6gy4EULU=.sha256"
+	"previous": "&caGw+RHTGO/WBWQDiRRv/9/SDZPS3w8U4xNafZEQrYw=.sha256"
 }
diff --git a/apps/ssb/tf-message.js b/apps/ssb/tf-message.js
index 90377e71..8fd7a204 100644
--- a/apps/ssb/tf-message.js
+++ b/apps/ssb/tf-message.js
@@ -1,4 +1,4 @@
-import {LitElement, html, render, unsafeHTML} from './lit-all.min.js';
+import {LitElement, html, repeat, render, unsafeHTML} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
 import * as emojis from './emojis.js';
@@ -313,7 +313,9 @@ class TfMessageElement extends LitElement {
 						@click=${() => self.set_expanded(false)}
 					>
 						Collapse</button
-					>${(this.message.child_messages || []).map(
+					>${repeat(
+						this.message.child_messages || [],
+						(x) => x.id,
 						(x) =>
 							html`<tf-message
 								.message=${x}
diff --git a/apps/ssb/tf-news.js b/apps/ssb/tf-news.js
index f559720f..c7856c74 100644
--- a/apps/ssb/tf-news.js
+++ b/apps/ssb/tf-news.js
@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import {LitElement, html, unsafeHTML, repeat, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
 
@@ -198,7 +198,9 @@ class TfNewsElement extends LitElement {
 		}
 		return html`
 			<div>
-				${final_messages.map(
+				${repeat(
+					final_messages,
+					(x) => x.id,
 					(x) => html`
 						<tf-message
 							.message=${x}
diff --git a/apps/ssb/tf-tab-news-feed.js b/apps/ssb/tf-tab-news-feed.js
index b0fc2824..c5fbf6cc 100644
--- a/apps/ssb/tf-tab-news-feed.js
+++ b/apps/ssb/tf-tab-news-feed.js
@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import {LitElement, cache, html, unsafeHTML, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
 
@@ -373,7 +373,8 @@ class TfTabNewsFeedElement extends LitElement {
 		if (
 			!this.messages ||
 			this._messages_hash !== this.hash ||
-			this._messages_following !== this.following
+			JSON.stringify(this._messages_following) !==
+				JSON.stringify(this.following)
 		) {
 			console.log(
 				`loading messages for ${this.whoami} (following ${this.following.length})`
@@ -417,7 +418,7 @@ class TfTabNewsFeedElement extends LitElement {
 				</p>
 			`;
 		}
-		return html`
+		return cache(html`
 			<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>
 				Mark All Read
 			</button>
@@ -433,7 +434,7 @@ class TfTabNewsFeedElement extends LitElement {
 				channel_unread=${this.channels_unread?.[this.channel()]}
 			></tf-news>
 			${more}
-		`;
+		`);
 	}
 }
 
diff --git a/apps/ssb/tf-tab-news.js b/apps/ssb/tf-tab-news.js
index ef99fadd..d404eb7c 100644
--- a/apps/ssb/tf-tab-news.js
+++ b/apps/ssb/tf-tab-news.js
@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import {LitElement, cache, html, unsafeHTML, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
 
@@ -238,7 +238,7 @@ class TfTabNewsElement extends LitElement {
 				name.
 			</div>`;
 		}
-		return html`
+		return cache(html`
 			${this.render_sidebar()}
 			<div
 				style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto"
@@ -297,7 +297,7 @@ class TfTabNewsElement extends LitElement {
 					></tf-tab-news-feed>
 				</div>
 			</div>
-		`;
+		`);
 	}
 }