ssb: Get recent reactions up front so that we don't need to delay showing the dialog for them.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&+Hv0lBH8OyyJq/ENWIGw1kpq3zrl56hqophb9vrekjk=.sha256"
+	"previous": "&JwI2HPmMbibkcF0ll7+mjIaMuSkwxPR3cQXsXhvGp58=.sha256"
 }

apps/ssb/emojis.js

@@ -14,23 +14,8 @@ function get_emojis() {
 	});
 }
 
-async function get_recent(author) {
-	let recent = await tfrpc.rpc.query(
-		`
-		SELECT DISTINCT content ->> '$.vote.expression' AS value
-		FROM messages
-		WHERE author = ? AND
-		content ->> '$.type' = 'vote'
-		ORDER BY timestamp DESC LIMIT 10
-	`,
-		[author]
-	);
-	return recent.map((x) => x.value);
-}
-
-export async function picker(callback, anchor, author) {
+export async function picker(callback, anchor, author, recent) {
 	let json = await get_emojis();
-	let recent = await get_recent(author);
 
 	let div = document.createElement('div');
 	div.id = 'emoji_picker';

apps/ssb/tf-app.js

@@ -21,6 +21,7 @@ class TfElement extends LitElement {
 			guest: {type: Boolean},
 			url: {type: String},
 			private_messages: {type: Array},
+			recent_reactions: {type: Array},
 		};
 	}
 
@@ -41,6 +42,7 @@ class TfElement extends LitElement {
 		this.channels_latest = {};
 		this.loading_latest = 0;
 		this.loading_latest_scheduled = 0;
+		this.recent_reactions = [];
 		tfrpc.rpc.getBroadcasts().then((b) => {
 			self.broadcasts = b || [];
 		});
@@ -452,6 +454,19 @@ class TfElement extends LitElement {
 		return users;
 	}
 
+	async load_recent_reactions() {
+		this.recent_reactions = (await tfrpc.rpc.query(
+			`
+			SELECT DISTINCT content ->> '$.vote.expression' AS value
+			FROM messages
+			WHERE author = ? AND
+			content ->> '$.type' = 'vote'
+			ORDER BY timestamp DESC LIMIT 10
+		`,
+			[this.whoami]
+		)).map((x) => x.value);
+	}
+
 	async load() {
 		this.loading_latest = true;
 		try {
@@ -469,6 +484,7 @@ class TfElement extends LitElement {
 				};
 				by_count.push({count: v.of, id: id});
 			}
+			let reactions = this.load_recent_reactions();
 			this.load_channels_latest(Object.keys(following));
 			this.channels_unread = JSON.parse(
 				(await tfrpc.rpc.databaseGet('unread')) ?? '{}'
@@ -494,6 +510,7 @@ class TfElement extends LitElement {
 			console.log(
 				`load finished ${whoami} => ${this.whoami} in ${(new Date() - start_time) / 1000}`
 			);
+			await reactions;
 			this.whoami = whoami;
 			this.loaded = whoami;
 		} finally {
@@ -551,6 +568,7 @@ class TfElement extends LitElement {
 					@channelsetunread=${this.channel_set_unread}
 					.connections=${this.connections}
 					.private_messages=${this.private_messages}
+					.recent_reactions=${this.recent_reactions}
 				></tf-tab-news>
 			`;
 		} else if (this.tab === 'connections') {

apps/ssb/tf-message.js

@@ -16,6 +16,7 @@ class TfMessageElement extends LitElement {
 			expanded: {type: Object},
 			channel: {type: String},
 			channel_unread: {type: Number},
+			recent_reactions: {type: Array},
 		};
 	}
 
@@ -31,6 +32,7 @@ class TfMessageElement extends LitElement {
 		this.format = 'message';
 		this.expanded = {};
 		this.channel_unread = -1;
+		this.recent_reactions = [];
 	}
 
 	connectedCallback() {
@@ -155,7 +157,7 @@ class TfMessageElement extends LitElement {
 	}
 
 	react(event) {
-		emojis.picker((x) => this.vote(x), null, this.whoami);
+		emojis.picker((x) => this.vote(x), null, this.whoami, this.recent_reactions);
 	}
 
 	show_image(link) {
@@ -337,6 +339,7 @@ class TfMessageElement extends LitElement {
 									.expanded=${this.expanded}
 									channel=${this.channel}
 									channel_unread=${this.channel_unread}
+									.recent_reactions=${this.recent_reactions}
 								></tf-message>`
 						)}
 					</div>
@@ -533,6 +536,7 @@ class TfMessageElement extends LitElement {
 						.expanded=${self.expanded}
 						channel=${self.channel}
 						channel_unread=${self.channel_unread}
+						.recent_reactions=${self.recent_reactions}
 					></tf-message>
 				`
 			)}
@@ -552,6 +556,7 @@ class TfMessageElement extends LitElement {
 							.drafts=${this.drafts}
 							@tf-discard=${this.discard_reply}
 							author=${this.message.author}
+							.recent_reactions=${this.recent_reactions}
 						></tf-compose>
 					`
 				: undefined;

apps/ssb/tf-news.js

@@ -13,6 +13,7 @@ class TfNewsElement extends LitElement {
 			expanded: {type: Object},
 			channel: {type: String},
 			channel_unread: {type: Number},
+			recent_reactions: {type: Array},
 		};
 	}
 
@@ -28,6 +29,7 @@ class TfNewsElement extends LitElement {
 		this.drafts = {};
 		this.expanded = {};
 		this.channel_unread = -1;
+		this.recent_reactions = [];
 	}
 
 	process_messages(messages) {
@@ -211,6 +213,7 @@ class TfNewsElement extends LitElement {
 							collapsed="true"
 							channel=${this.channel}
 							channel_unread=${this.channel_unread}
+							.recent_reactions=${this.recent_reactions}
 						></tf-message>
 						${x.rowid == unread_rowid
 							? html`<div style="display: flex; flex-direction: row">

apps/ssb/tf-tab-news-feed.js

@@ -18,6 +18,7 @@ class TfTabNewsFeedElement extends LitElement {
 			time_range: {type: Array},
 			time_loading: {type: Array},
 			private_messages: {type: Array},
+			recent_reactions: {type: Array},
 		};
 	}
 
@@ -37,6 +38,7 @@ class TfTabNewsFeedElement extends LitElement {
 		this.start_time = new Date().valueOf();
 		this.time_range = [0, 0];
 		this.time_loading = undefined;
+		this.recent_reactions = [];
 		this.loading = 0;
 	}
 
@@ -452,6 +454,7 @@ class TfTabNewsFeedElement extends LitElement {
 				.expanded=${this.expanded}
 				channel=${this.channel()}
 				channel_unread=${this.channels_unread?.[this.channel()]}
+				.recent_reactions=${this.recent_reactions}
 			></tf-news>
 			${more}
 		`);

apps/ssb/tf-tab-news.js

@@ -24,6 +24,7 @@ class TfTabNewsElement extends LitElement {
 			channels_latest: {type: Object},
 			connections: {type: Array},
 			private_messages: {type: Array},
+			recent_reactions: {type: Array},
 		};
 	}
 
@@ -43,6 +44,7 @@ class TfTabNewsElement extends LitElement {
 		this.channels_latest = {};
 		this.channels = [];
 		this.connections = [];
+		this.recent_reactions = [];
 		tfrpc.rpc.localStorageGet('drafts').then(function (d) {
 			self.drafts = JSON.parse(d || '{}');
 		});
@@ -342,6 +344,7 @@ class TfTabNewsElement extends LitElement {
 						.channels_unread=${this.channels_unread}
 						.channels_latest=${this.channels_latest}
 						.private_messages=${this.private_messages}
+						.recent_reactions=${this.recent_reactions}
 					></tf-tab-news-feed>
 				</div>
 			</div>