From 3ab1e9a4502ce08b0f75176d2869224a7cd0964b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 12 Apr 2022 17:12:47 +0200
Subject: [PATCH] Web: add API query spinner

The spinner starts fading in when API calls take longer than 100ms.

Not used yet, how to hook it up to API calls is still being discovered.
---
 web/app/src/App.vue                   | 21 ++++++++++++++++++---
 web/app/src/components/ApiSpinner.vue | 24 ++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 web/app/src/components/ApiSpinner.vue

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index ccac69af..94357fa1 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -1,5 +1,8 @@
 <template>
-  <header>{{ flamencoName }}<span class='flamenco-version'>version: {{ flamencoVersion }}</span></header>
+  <header>{{ flamencoName }}
+    <api-spinner :numRunningQueries="numRunningQueries" />
+    <span class='flamenco-version'>version: {{ flamencoVersion }}</span>
+  </header>
   <div class="col-1">
     <jobs-table ref="jobsTable" :apiClient="apiClient" @activeJobChange="onActiveJobChanged" />
   </div>
@@ -18,6 +21,7 @@
 <script>
 import * as urls from './urls'
 import * as API from './manager-api';
+import ApiSpinner from './components/ApiSpinner.vue'
 import JobsTable from './components/JobsTable.vue'
 import JobDetails from './components/JobDetails.vue'
 import TaskDetails from './components/TaskDetails.vue'
@@ -29,7 +33,7 @@ const DEFAULT_FLAMENCO_VERSION = "unknown";
 export default {
   name: 'App',
   components: {
-    JobsTable, JobDetails, TaskDetails, UpdateListener,
+    ApiSpinner, JobsTable, JobDetails, TaskDetails, UpdateListener,
   },
   data: () => {
     return {
@@ -40,6 +44,8 @@ export default {
       activeJobSummary: {},
       flamencoName: DEFAULT_FLAMENCO_NAME,
       flamencoVersion: DEFAULT_FLAMENCO_VERSION,
+
+      numRunningQueries: 0,
     };
   },
   mounted() {
@@ -85,7 +91,16 @@ export default {
         this.flamencoName = version.name;
         this.flamencoVersion = version.version;
       })
-    }
+    },
+
+    // Wrap a Flamenco API promise, to keep track of how many queries are running.
+    // This is just a test to see how this works, not a final functional design.
+    _wrap(promise) {
+      this.numRunningQueries++;
+      return promise.finally(() => {
+        this.numRunningQueries--;
+      });
+    },
   },
 }
 </script>
diff --git a/web/app/src/components/ApiSpinner.vue b/web/app/src/components/ApiSpinner.vue
new file mode 100644
index 00000000..576dc8ae
--- /dev/null
+++ b/web/app/src/components/ApiSpinner.vue
@@ -0,0 +1,24 @@
+<template>
+  <span class="api-spinner" :class="{ running: numRunningQueries > 0 }">&#128008;</span>
+</template>
+
+<script>
+export default {
+  props: ["numRunningQueries"],
+};
+</script>
+
+<style scoped>
+span {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: 100ms;
+  transition-duration: 300ms;
+}
+
+span.running {
+  visibility: visible;
+  opacity: 1;
+  transition-delay: 0;
+}
+</style>