From c7fc735af3f852494fde9222e7a5ec438862f412 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Fri, 27 Jan 2023 09:28:48 +0800
Subject: [PATCH] added loading spinner component

---
 components/loading/loadingSpinner.vue | 23 +++++++++++++++++++++++
 pages/notes/[id].vue                  |  9 ++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 components/loading/loadingSpinner.vue

diff --git a/components/loading/loadingSpinner.vue b/components/loading/loadingSpinner.vue
new file mode 100644
index 0000000..cdc58b2
--- /dev/null
+++ b/components/loading/loadingSpinner.vue
@@ -0,0 +1,23 @@
+<template>
+	<div>
+		<svg class="spinner">
+			<circle
+				class="opacity-25"
+				cx="12"
+				cy="12"
+				r="10"
+				stroke="currentColor"
+				stroke-width="4"></circle>
+			<path
+				class="opacity-75"
+				fill="currentColor"
+				d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+		</svg>
+	</div>
+</template>
+
+<style scoped>
+	.spinner {
+		@apply h-6 w-6 animate-spin;
+	}
+</style>
diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index 168fa26..ba24f46 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -2,9 +2,12 @@
 	<div class="app">
 		<textarea
 			v-model="title"
+			placeholder="untitled"
 			class="titleTextArea" />
 		<button @click="submit()">
+			<LoadingSpinner v-if="isSubmitting" />
 			<Icon
+				v-if="!isSubmitting"
 				name="fa6-solid:floppy-disk"
 				size="24" />
 		</button>
@@ -28,7 +31,7 @@
 	const { refresh } = await useFetch('/api/note', {
 		method: 'GET',
 		query: {
-			id: route.params.id[0],
+			id: route.params.id,
 		},
 		onResponse({ response }) {
 			title.value = response._data.note.title;
@@ -42,17 +45,17 @@
 		await useFetch('/api/note', {
 			method: 'POST',
 			query: {
-				id: route.params.id[0],
+				id: route.params.id,
 			},
 			body: {
 				title: title.value,
 				description: description.value,
 			},
 			onResponse({ response }) {
+				isSubmitting.value = false;
 				console.log('POST:', response._data.message);
 			},
 		});
-		isSubmitting.value = false;
 	};
 
 	onMounted(() => {