ssb: Make the progress bar more indefinite-looking.

apps/ssb.json

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

apps/ssb/tf-app.js

@@ -453,9 +453,9 @@ class TfElement extends LitElement {
 
 	reset_progress() {
 		if (this.progress === undefined) {
+			this._progress_start = new Date();
 			requestAnimationFrame(this.update_progress.bind(this));
 		}
-		this.progress = 0;
 	}
 
 	update_progress() {
@@ -463,8 +463,7 @@ class TfElement extends LitElement {
 			this.progress = undefined;
 			return;
 		}
-		const factor = 0.75;
-		this.progress = (this.progress * factor) + (100.0 * (1.0 - factor));
+		this.progress = (new Date() - this._progress_start).valueOf();
 		requestAnimationFrame(this.update_progress.bind(this));
 	}
 
@@ -772,13 +771,17 @@ class TfElement extends LitElement {
 						Loading...
 					</div>`
 				: this.render_tab();
-		let progress = this.progress !== undefined ?
-				html`
+		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
+								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;
+					`
+				: undefined;
 		return html`
 			<div
 				style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"