ssb: Better search feedback.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&Do4vIjdE5vJgJ+fIZ10zOeDQcqNd+VUacQl2wzRjGhw=.sha256"
+	"previous": "&8uDmJfrjfiVcvxJlkYli5PqLnO8Xje/1qDVtzAXA7A4=.sha256"
 }

apps/ssb/tf-tab-search.js

@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML} from './lit-all.min.js';
+import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles, generate_theme} from './tf-styles.js';
 
@@ -133,17 +133,25 @@ class TfTabSearchElement extends LitElement {
 		}
 	}
 
-	render() {
+	async query_results() {
 		if (this.query !== this.last_query) {
 			this.last_query = this.query;
-			this.search(this.query);
+			this._query = this.search(this.query);
 		}
-		let self = this;
+		await this._query;
+	}
+
+	render() {
 		return html`
 			<style>
 				${generate_theme()}
 			</style>
-			<div class="w3-padding">${this.render_results()}</div>
+			<div class="w3-padding">
+				${until(
+					this.query_results().then(this.render_results.bind(this)),
+					html`<p>Searching...<span class="w3-animate-fading">🦀</span></p>`
+				)}
+			</div>
 		`;
 	}
 }