Adds loading icon

ucdavis · Aug 5, 2024 · 905cc62 · 905cc62
1 parent 02636dc
commit 905cc62
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/web/Areas/Directory/Views/Card.cshtml b/web/Areas/Directory/Views/Card.cshtml
@@ -31,6 +31,7 @@
               label="Display debugging">
     </q-toggle>
     -->
+    <q-spinner color="primary" size="2em" style="margin-left: 2em;" :class="{ invisible: !spinner }"></q-spinner>
 </q-form>
     <div class="row q-pa-sm q-gutter-sm" id="directoryResults">
         <q-card v-for="user in results" class="col-2 col-xs-8 col-sm-5 col-md-8 col-lg-3 col-xl-2 block directory">
@@ -137,22 +138,27 @@
                     ucd: getItemFromStorage("directory_ucd") ?? false,
                     ids: getItemFromStorage("directory_ids") ?? false,
                     debug: getItemFromStorage("directory_debug") ?? false,
+                    spinner: false,
                     results: []
                 }
             },
             methods: {
                 findUsers: async function () {
+                    this.spinner = false;
+                    this.results = [];
                     var urlBase = "@Url.Content("~/Directory/search/")" + this.userSearch;
                     if (this.ucd) {
                         urlBase += "/ucd"
                     }
                     if (this.userSearch.length >= 2) {
+                        this.spinner = true;
                         this.results = (await viperFetch(this, urlBase))
+                        this.spinner = false;
                     }
                 }
             },
             mounted() {
-                this.findUsers()
+                this.findUsers();
             },
             watch: {
                 userSearch: function () {

diff --git a/web/wwwroot/css/directory.css b/web/wwwroot/css/directory.css
@@ -98,3 +98,6 @@
     .directory .top_button:hover {
         color: #fff;
     }
+.directory .invisible {
+    display: none;
+}