ssb: Tried to do the right lit things to prevent unnecessary re-rendering. Ended up doing a lazy JSON thing.

apps/ssb.json

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

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}

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}

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

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