From 3b20b6ce0038ddb25e06ecc5103d77e19e23e1c1 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Mon, 16 Jan 2023 10:45:13 +1100
Subject: Add loading indicator

---
 src/components/LoadingModal.vue    | 27 +++++++++++++++++++++++++++
 src/components/SearchModal.vue     |  4 +++-
 src/components/icon/LoaderIcon.vue | 13 +++++++++++++
 3 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 src/components/LoadingModal.vue
 create mode 100644 src/components/icon/LoaderIcon.vue

(limited to 'src/components')

diff --git a/src/components/LoadingModal.vue b/src/components/LoadingModal.vue
new file mode 100644
index 0000000..5d207c7
--- /dev/null
+++ b/src/components/LoadingModal.vue
@@ -0,0 +1,27 @@
+<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="w-12 h-12 animate-[spin_6s_linear_infinite]"/>
+		<div class="whitespace-nowrap">{{msg}}</div>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import {computed} from 'vue';
+import LoaderIcon from './icon/LoaderIcon.vue';
+import {useStore} from '../store';
+
+const store = useStore();
+
+defineProps({
+	msg: {type: String, required: true},
+});
+
+const styles = computed(() => ({
+	color: store.color.text,
+	backgroundColor: store.color.bgDark2,
+	borderRadius: store.borderRadius + 'px',
+}));
+</script>
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index ade86be..be8df51 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -47,7 +47,7 @@ const props = defineProps({
 	eventTree: {type: Object as PropType<RBTree<HistEvent>>, required: true},
 	titleToEvent: {type: Object as PropType<Map<string, HistEvent>>, required: true},
 });
-const emit = defineEmits(['search', 'close', 'info-click']);
+const emit = defineEmits(['search', 'close', 'info-click', 'net-wait', 'net-get']);
 
 // Search-suggestion data
 const searchSuggs = ref([] as string[]);
@@ -179,7 +179,9 @@ async function resolveSearch(eventTitle: string){
 	if (store.reqImgs){
 		urlParams.append('imgonly', 'true');
 	}
+	emit('net-wait'); // Allows the parent component to show a loading-indicator
 	let responseObj: EventInfoJson | null = await queryServer(urlParams);
+	emit('net-get');
 	if (responseObj != null){
 		let eventInfo = jsonToEventInfo(responseObj);
 		if (store.reqImgs && eventInfo.event.imgId == null){
diff --git a/src/components/icon/LoaderIcon.vue b/src/components/icon/LoaderIcon.vue
new file mode 100644
index 0000000..c2a0369
--- /dev/null
+++ b/src/components/icon/LoaderIcon.vue
@@ -0,0 +1,13 @@
+<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>
-- 
cgit v1.2.3