tasiaiso/tildefriends
1
0
Fork 0
forked from cory/tildefriends
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
Cory McWilliams
2025-01-11 14:09:42 -05:00
parent 02759c6f83
commit aa15da50ab
5 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/ssb.json
View File

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

6
apps/ssb/tf-message.js
View File

@@ -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 tfrpc from '/static/tfrpc.js';
import * as tfutils from './tf-utils.js'; import * as tfutils from './tf-utils.js';
import * as emojis from './emojis.js'; import * as emojis from './emojis.js';
@@ -313,7 +313,9 @@ class TfMessageElement extends LitElement {
@click=${() => self.set_expanded(false)} @click=${() => self.set_expanded(false)}
> >
Collapse</button Collapse</button
>${(this.message.child_messages || []).map( >${repeat(
this.message.child_messages || [],
(x) => x.id,
(x) => (x) =>
html`<tf-message html`<tf-message
.message=${x} .message=${x}

6
apps/ssb/tf-news.js
View File

@@ -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 * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js'; import {styles} from './tf-styles.js';
@@ -198,7 +198,9 @@ class TfNewsElement extends LitElement {
} }
return html` return html`
<div> <div>
${final_messages.map( ${repeat(
final_messages,
(x) => x.id,
(x) => html` (x) => html`
<tf-message <tf-message
.message=${x} .message=${x}

9
apps/ssb/tf-tab-news-feed.js
View File

@@ -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 * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js'; import {styles} from './tf-styles.js';
@@ -373,7 +373,8 @@ class TfTabNewsFeedElement extends LitElement {
if ( if (
!this.messages || !this.messages ||
this._messages_hash !== this.hash || this._messages_hash !== this.hash ||
this._messages_following !== this.following JSON.stringify(this._messages_following) !==
JSON.stringify(this.following)
) { ) {
console.log( console.log(
`loading messages for ${this.whoami} (following ${this.following.length})` `loading messages for ${this.whoami} (following ${this.following.length})`
@@ -417,7 +418,7 @@ class TfTabNewsFeedElement extends LitElement {
</p> </p>
`; `;
} }
return html` return cache(html`
<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}> <button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>
Mark All Read Mark All Read
</button> </button>
@@ -433,7 +434,7 @@ class TfTabNewsFeedElement extends LitElement {
channel_unread=${this.channels_unread?.[this.channel()]} channel_unread=${this.channels_unread?.[this.channel()]}
></tf-news> ></tf-news>
${more} ${more}
`; `);
} }
} }

6
apps/ssb/tf-tab-news.js
View File

@@ -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 * as tfrpc from '/static/tfrpc.js';
import {styles} from './tf-styles.js'; import {styles} from './tf-styles.js';
@@ -238,7 +238,7 @@ class TfTabNewsElement extends LitElement {
name. name.
</div>`; </div>`;
} }
return html` return cache(html`
${this.render_sidebar()} ${this.render_sidebar()}
<div <div
style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto" 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> ></tf-tab-news-feed>
</div> </div>
</div> </div>
`; `);
} }
} }