ssb: Make the progress bar more indefinite-looking.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&DGtlnm5wWRZCgJMF8JsP6VtzNRrd4KLoERJRpFULqOY=.sha256"
+	"previous": "&JRzG7VkGOP1IzLdknli36Gr4PddIvkOEKt7L6IMw/lk=.sha256"
 }

apps/ssb/tf-app.js

@@ -25,6 +25,7 @@ class TfElement extends LitElement {
 			recent_reactions: {type: Array},
 			is_administrator: {type: Boolean},
 			stay_connected: {type: Boolean},
+			progress: {type: Number},
 		};
 	}
 
@@ -450,7 +451,24 @@ class TfElement extends LitElement {
 		this.schedule_load_latest();
 	}
 
+	reset_progress() {
+		if (this.progress === undefined) {
+			this._progress_start = new Date();
+			requestAnimationFrame(this.update_progress.bind(this));
+		}
+	}
+
+	update_progress() {
+		if (!this.loading_latest && !this.loading_latest_scheduled) {
+			this.progress = undefined;
+			return;
+		}
+		this.progress = (new Date() - this._progress_start).valueOf();
+		requestAnimationFrame(this.update_progress.bind(this));
+	}
+
 	schedule_load_latest() {
+		this.reset_progress();
 		if (!this.loading_latest) {
 			this.shadowRoot.getElementById('tf-tab-news')?.load_latest();
 			this.load();
@@ -495,6 +513,7 @@ class TfElement extends LitElement {
 
 	async load() {
 		this.loading_latest = true;
+		this.reset_progress();
 		try {
 			let start_time = new Date();
 			let whoami = this.whoami;
@@ -646,6 +665,7 @@ class TfElement extends LitElement {
 	async set_tab(tab) {
 		this.tab = tab;
 		if (tab === 'news') {
+			this.schedule_load_latest();
 			await tfrpc.rpc.setHash('#');
 		} else if (tab === 'connections') {
 			await tfrpc.rpc.setHash('#connections');
@@ -751,11 +771,23 @@ class TfElement extends LitElement {
 						Loading...
 					</div>`
 				: this.render_tab();
+		let progress =
+			this.progress !== undefined
+				? html`
+						<div style="position: absolute; width: 100%" id="progress">
+							<div
+								class="w3-theme-l2"
+								style=${`height: 4px; position: absolute; right: ${Math.cos(this.progress / 250) > 0 ? 'auto' : '0'}; width: ${50 * Math.sin(this.progress / 250) + 50}%`}
+							></div>
+						</div>
+					`
+				: undefined;
 		return html`
 			<div
 				style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"
 				class="w3-theme-dark"
 			>
+				${progress}
 				<div style="flex: 0 0">${tabs}</div>
 				<div style="flex: 1 1; overflow: auto; contain: layout">
 					${contents}