Add loading-from-server indicator

3 files changed, 65 insertions, 5 deletions

diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
new file mode 100644
index 0000000..6ef7a97
--- /dev/null
+++ b/src/components/LoadingModal.vue
@@ -0,0 +1,34 @@
+<template>
+<div class="fixed left-0 top-0 w-full h-full bg-black/40">
+	<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
+		flex items-center py-3 px-3 gap-2" :style="styles">
+		<loader-icon class="block w-12 h-12 animate-[spin_6s_linear_infinite]"/>
+		<div class="whitespace-nowrap">Querying server ...</div>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+import LoaderIcon from './icon/LoaderIcon.vue';
+import {UiOptions} from '../lib';
+
+export default defineComponent({
+	props: {
+		uiOpts: {type: Object as PropType<UiOptions>, required: true},
+	},
+	computed: {
+		styles(): Record<string,string> {
+			return {
+				color: this.uiOpts.textColor,
+				backgroundColor: this.uiOpts.bgColorDark2,
+				borderRadius: this.uiOpts.borderRadius + 'px',
+				boxShadow: this.uiOpts.shadowNormal,
+			};
+		},
+	},
+	components: {
+		LoaderIcon,
+	},
+});
+</script>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 55e50a1..e9abef5 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -37,11 +37,12 @@ import SearchIcon from './icon/SearchIcon.vue';
 import LogInIcon from './icon/LogInIcon.vue';
 import InfoIcon from './icon/InfoIcon.vue';
 import {TolNode, TolMap} from '../tol';
-import {LayoutNode, LayoutOptions} from '../layout';
-import {getServerResponse, SearchSugg, SearchSuggResponse, UiOptions} from '../lib';
+import {LayoutNode, LayoutMap, LayoutOptions} from '../layout';
+import {queryServer, SearchSugg, SearchSuggResponse, UiOptions} from '../lib';
 
 export default defineComponent({
 	props: {
+		lytMap: {type: Object as PropType<LayoutMap>, required: true}, // Used to check if a searched-for node exists
 		tolMap: {type: Object as PropType<TolMap>, required: true}, // Upon a search response, gets new nodes added
 		lytOpts: {type: Object as PropType<LayoutOptions>, required: true},
 		uiOpts: {type: Object as PropType<UiOptions>, required: true},
@@ -131,7 +132,7 @@ export default defineComponent({
 			let doReq = async () => {
 				let suggInput = this.pendingSuggInput;
 				let responseObj: SearchSuggResponse =
-					await getServerResponse(this.pendingSuggReqParams);
+					await queryServer(this.pendingSuggReqParams);
 				if (responseObj == null){
 					return;
 				}
@@ -191,10 +192,17 @@ export default defineComponent({
 			if (tolNodeName == ''){
 				return;
 			}
+			// Check if the node has already been retrieved
+			if (this.lytMap.has(tolNodeName)){
+				this.$emit('search', tolNodeName);
+				return;
+			}
 			// Ask server for nodes in parent-chain, updates tolMap, then emits search event
 			let urlParams = 'type=node&toroot=true&name=' + encodeURIComponent(tolNodeName);
 			urlParams += '&tree=' + this.uiOpts.tree;
-			let responseObj: {[x: string]: TolNode} = await getServerResponse(urlParams);
+			this.$emit('net-wait'); // Allows the parent component to show a loading-indicator
+			let responseObj: {[x: string]: TolNode} = await queryServer(urlParams);
+			this.$emit('net-get');
 			if (responseObj == null){
 				return;
 			}
@@ -232,6 +240,6 @@ export default defineComponent({
 		(this.$refs.searchInput as HTMLInputElement).focus();
 	},
 	components: {SearchIcon, InfoIcon, LogInIcon, },
-	emits: ['search', 'close', 'info-click', 'setting-chg', ],
+	emits: ['search', 'close', 'info-click', 'setting-chg', 'net-wait', 'net-get', ],
 });
 </script>
diff --git a/src/components/icon/LoaderIcon.vue b/src/components/icon/LoaderIcon.vue
new file mode 100644
index 0000000..cd5093b
--- /dev/null
+++ b/src/components/icon/LoaderIcon.vue
@@ -0,0 +1,18 @@
+<template>
+<svg viewBox="0 0 24 24" fill="none"
+	stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+	<line x1="12" y1="2" x2="12" y2="6"></line>
+	<line x1="12" y1="18" x2="12" y2="22"></line>
+	<line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line>
+	<line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line>
+	<line x1="2" y1="12" x2="6" y2="12"></line>
+	<line x1="18" y1="12" x2="22" y2="12"></line>
+	<line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line>
+	<line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line>
+</svg>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from 'vue';
+export default defineComponent({});
+</script>