Throbber

htdocs/App.vue

@@ -1,6 +1,7 @@
 <template>
-	<div class="container-fluid">
+	<div class="container-fluid" style="padding-top: 5rem;">
 		<Navbar v-model:server="server" :user="user" />
+		<Throbber :client="client" />
 		<div class="container">
 			<Login :secret="secret" v-model:client="client" v-model:server="server" v-model:user="user" />
 			<router-view v-if="user" :client="client"></router-view>
@@ -10,6 +11,7 @@
 
 <script>
 	import Navbar from './Navbar.vue';
+	import Throbber from './Throbber.vue';
 	import Login from './Login.vue';
 	import RouteSchedule from './RouteSchedule.vue';
 	import RoutePatientLookup from './RoutePatientLookup.vue';
@@ -21,7 +23,7 @@
 
 	export default {
 		components: {
-			Navbar, Login
+			Navbar, Throbber, Login
 		},
 		props: {
 			secret: String

htdocs/Login.vue

@@ -132,7 +132,7 @@
 					this.$emit('update:server', this.x_server = (await this.x_client.serverinfo()).result);
 					console.log('Backend secret', this.secret);
 					console.log(this.banner);
-					var stop = watchEffect(() => { if(!this.x_client.connected.value) { stop(); this.x_client = this.x_server = this.x_user = null; this.fail = true; } });
+					var stop = watchEffect(() => { if(!this.x_client.status.connected) { stop(); this.x_client = this.x_server = this.x_user = null; this.fail = true; } });
 				} else {
 					this.fail = true;
 					this.host = undefined;

htdocs/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-	<nav class="navbar navbar-expand-lg bg-dark">
+	<nav class="navbar navbar-expand-lg fixed-top bg-dark">
 		<div class="container-fluid">
 			<router-link class="navbar-brand" to="/"><img src="/icon.svg" style="height: 1.875rem;" /></router-link>
 			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

htdocs/Throbber.vue

@@ -0,0 +1,57 @@
+<template>
+	<div :class="{ connected, idle }" />
+</template>
+
+<style scoped>
+	div {
+		position: fixed;
+		top: 59px;
+		right: 0;
+		left: 0;
+		height: 0.5rem;
+		z-index: 1030;
+		background-color: #dc3545;
+	}
+	div.connected {
+		background-color: #0d6efd;
+		background-image: repeating-linear-gradient(
+			-45deg,
+			rgba(255, 255, 255, 0.1),
+			rgba(255, 255, 255, 0.1) 10px,
+			rgba(0, 0, 0, 0.1) 10px,
+			rgba(0, 0, 0, 0.1) 20px
+		);
+		background-size: 200% 200%;
+		animation:  barberpole 60s linear infinite;
+		animation-direction: reverse;
+	}
+	div.idle {
+		visibility: hidden;
+		opacity: 0;
+		transition: visibility 0s 0.5s, opacity 0.5s linear;
+	}
+	@keyframes barberpole {
+		100% {
+			background-position: 100% 100%;
+		}
+	}
+</style>
+
+<script>
+	export default {
+		props: {
+			client: {
+				type: Object,
+				default: null
+			}
+		},
+		computed: {
+			connected() {
+				return (this.client) && (this.client.status) && (this.client.status.connected);
+			},
+			idle() {
+				return this.connected ? !this.client.status.request : false;
+			}
+		}
+	};
+</script>

htdocs/vistax.mjs

@@ -284,12 +284,12 @@ export function Client(cid, secret) {
 
 	this.secret = secret;
 	this.cid = cid;
-	this.connected = reactive({ value: true });
+	this.status = reactive({ connected: true, request: null });
 
 	this.close = function() {
 		console.log('CLOSE', cid);
 		if(heartbeat) window.clearInterval(heartbeat);
-		this.connected.value = false;
+		this.status.connected = false;
 		return vista.close(cid);
 	};
 	this.call = async function(body, ...params) {
@@ -298,7 +298,8 @@ export function Client(cid, secret) {
 			if(body.params) Array.prototype.push.apply(body.params, params);
 			else body.params = params;
 		}
-		var res = await vista.call(cid, body);
+		var res = await vista.call(cid, this.status.request = body);
+		this.status.request = null;
 		if((res.error) && (res.error.type == 'ConnectionResetError')) this.close();
 		res._request = body;
 		return res;