show spinner in lookup input and request

CakeDC · Sep 17, 2024 · e76daa6 · e76daa6
1 parent 7f889af
commit e76daa6
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 33 deletions.
diff --git a/templates/element/Search/v_templates.php b/templates/element/Search/v_templates.php
@@ -367,6 +367,30 @@
 .suggestions-list .is-active {
   background-color: var(--search-color-gray-200);
 }
+.lookup-wrapper {
+    position: relative;
+}
+.input-wrapper {
+    position: relative;
+}
+.loading-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+.loading-spinner {
+    border: 2px solid #f3f3f3;
+    border-top: 2px solid #3498db;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    animation: spin 1s linear infinite;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
 </style>
 
 <script type="text/x-template" id="search-list">
@@ -715,36 +739,41 @@ class="btn-remove-item"
 </script>
 
 <script type="text/x-template" id="search-input-lookup-template">
-  <div class="lookup-wrapper">
-    <input
-      type="text"
-      class="form-control value typeahead"
-      :name="'v[' + index + '][value][]'"
-      v-model="inputValue"
-      autocomplete="off"
-      @input="onInput"
-      @keydown.down="onArrowDown"
-      @keydown.up="onArrowUp"
-      @keydown.enter="onEnter"
-      @keydown.esc="onEscape"
-      @blur="onBlur"
-    />
-    <ul v-if="showSuggestions" class="suggestions-list" role="listbox">
-      <li
-        v-for="(suggestion, index) in suggestions"
-        :key="suggestion[idName]"
-        @click="selectSuggestion(suggestion)"
-        @mouseenter="arrowCounter = index"
-        :class="{ 'is-active': index === arrowCounter }"
-        role="option"
-      >
-        {{ suggestion[valueName] }}
-      </li>
-    </ul>
-    <input
-      type="hidden"
-      :name="'v[' + index + '][id][]'"
-      v-model="selectedId"
-    />
-  </div>
+	<div class="lookup-wrapper">
+		<div class="input-wrapper">
+			<input
+				type="text"
+				class="form-control value typeahead"
+				:name="'v[' + index + '][value][]'"
+				v-model="inputValue"
+				autocomplete="off"
+				@input="onInput"
+				@keydown.down="onArrowDown"
+				@keydown.up="onArrowUp"
+				@keydown.enter="onEnter"
+				@keydown.esc="onEscape"
+				@blur="onBlur"
+			/>
+			<div v-if="isLoading" class="loading-icon">
+				<i class="fa fa-spinner fa-spin"></i>
+			</div>
+		</div>
+		<ul v-if="showSuggestions" class="suggestions-list" role="listbox">
+			<li
+				v-for="(suggestion, index) in suggestions"
+				:key="suggestion[idName]"
+				@click="selectSuggestion(suggestion)"
+				@mouseenter="arrowCounter = index"
+				:class="{ 'is-active': index === arrowCounter }"
+				role="option"
+			>
+				{{ suggestion[valueName] }}
+			</li>
+		</ul>
+		<input
+			type="hidden"
+			:name="'v[' + index + '][id][]'"
+			v-model="selectedId"
+		/>
+	</div>
 </script>
diff --git a/webroot/js/main.js b/webroot/js/main.js
@@ -710,7 +710,8 @@ const SearchLookupInput = {
             suggestions: [],
             showSuggestions: false,
             debounceTimeout: null,
-            arrowCounter: -1
+            arrowCounter: -1,
+            isLoading: false
         };
     },
     computed: {
@@ -740,6 +741,7 @@ const SearchLookupInput = {
         async fetchSuggestions() {
             if (this.inputValue.length >= 2) {
                 try {
+                    this.isLoading = true;
                     let query = this.query.replace(this.wildcard, this.inputValue)
                     let autocompleteUrl = this.autocompleteUrl + '?' + query;
                     if (!/^https?:\/\//i.test(autocompleteUrl)) {
@@ -752,8 +754,11 @@ const SearchLookupInput = {
                     this.arrowCounter = -1;
                 } catch (error) {
                     console.error('Error fetching suggestions:', error);
+                } finally {
+                    this.isLoading = false;
                 }
             } else {
+                this.isLoading = false;
                 this.suggestions = [];
                 this.showSuggestions = false;
             }