ssb: A progress bar experiment.

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🦀",
-	"previous": "&DGtlnm5wWRZCgJMF8JsP6VtzNRrd4KLoERJRpFULqOY=.sha256"
+	"previous": "&Sxc7sz+X6FHHJiaLQU+E9Q0guS5yvqKyrZjF3ZyFStc=.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,25 @@ class TfElement extends LitElement {
 		this.schedule_load_latest();
 	}
 
+	reset_progress() {
+		if (this.progress === undefined) {
+			requestAnimationFrame(this.update_progress.bind(this));
+		}
+		this.progress = 0;
+	}
+
+	update_progress() {
+		if (!this.loading_latest && !this.loading_latest_scheduled) {
+			this.progress = undefined;
+			return;
+		}
+		const factor = 0.75;
+		this.progress = (this.progress * factor) + (100.0 * (1.0 - factor));
+		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 +514,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 +666,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 +772,19 @@ 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; width: ${this.progress}%`}></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}