Throbber

htdocs/App.vue

@@ -1,6 +1,7 @@
 <template>
 	<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/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,7 +284,7 @@ export function Client(cid, secret) {
 
 	this.secret = secret;
 	this.cid = cid;
-	this.status = reactive({ connected: true });
+	this.status = reactive({ connected: true, request: null });
 
 	this.close = function() {
 		console.log('CLOSE', cid);
@@ -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;