From 712c3d90c73112d0d7ed0fb2a5c370e69874e258 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Fri, 12 Jan 2024 21:29:14 -0700
Subject: [PATCH] Add preloader animation (#72)

Closes: #70

Adds a prelaoder animation to the results container while the image is loading and being processed for detections.

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/72
---
 src/pages/detect.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index 48398db..baa5a93 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -8,9 +8,8 @@
       <div class="image-container">
         <canvas id="im-draw" ref="image_cvs" :style="`display: ${imageLoaded ? 'block' : 'none'}; flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; background-size: contain; background-position: center; background-repeat: no-repeat`" />
         <SvgIcon v-if="!imageView"  icon="image" fill-color="var(--avn-theme-color)" @click="selectImage" />
-        <div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
       </div>
-      <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
+      <div v-if="(resultData && resultData.detections) || detecting" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="result in showResults.filter( r => { return r.aboveThreshold && r.isSearched && !r.isDeleted })"
           :class="(result.resultIndex == selectedChip) ? 'selected-chip' : ''"
           :text="result.label"
@@ -21,7 +20,8 @@
           @delete="deleteChip(result.resultIndex)"
           :style="chipGradient(result.confidence)"
         />
-        <span v-if="numResults == 0" style="height: var(--f7-chip-height); font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">No results.</span>
+        <span v-if="numResults == 0 && !detecting" style="height: var(--f7-chip-height); font-size: calc(var(--f7-chip-height) - 4px); font-weight: bolder; margin: 2px;">No results.</span>
+        <f7-preloader v-if="detecting" size="32" style="color: var(--avn-theme-color);" />
       </div>
       <div v-if="showDetectSettings" class="detect-inputs" style="grid-area: detect-settings;">
         <f7-range class="level-slide-horz" :min="0" :max="100" :step="1" @range:change="onLevelChange" v-model:value="detectorLevel" type="range" style="flex: 1 1 50px"/>
@@ -99,7 +99,7 @@
   .detect-grid {
     display: grid;
     grid-template-columns: 1fr;
-    grid-template-rows: 1fr auto auto min-content;
+    grid-template-rows: 1fr 56px auto min-content;
     grid-template-areas: 
       "image-view"
       "result-view"
@@ -203,7 +203,7 @@
 
   @media (max-height: 450px) and (orientation: landscape) {
     .detect-grid {
-      grid-template-columns: minmax(0,1fr) max-content auto auto;
+      grid-template-columns: minmax(0,1fr) minmax(56px,max-content) auto auto;
       grid-template-rows: calc(100vh - var(--f7-navbar-height) - var(--f7-safe-area-top) - var(--f7-safe-area-bottom) - 64px);
       grid-template-areas: 
         "image-view result-view detect-settings menu-view";
@@ -304,6 +304,7 @@
         imageLoaded: false,
         imageView: null,
         imageLoadMode: "environment",
+        detecting: false,
         detectPanel: false,
         showDetectSettings: false,
         detectorName: '',
@@ -400,10 +401,12 @@
             if (this.status !== 200) {
               //this.response.text().then(function(message){alert(message)})
               console.log(xhr.response)
+              self.detecting = false
               return;
             }
             self.resultData = JSON.parse(xhr.response)
             self.uploadDirty = true
+            self.detecting = false
           }
           
           var doodsData = {
@@ -496,6 +499,7 @@
             const searchImage = this.$refs.image_chooser.files[0]
             var reader = new FileReader()
             reader.addEventListener("loadend", () => {
+              this.detecting = true
               resolve(reader.result)
             })
             reader.readAsDataURL(searchImage)