Added Save progress and a text counter on textbox

src/views/NewEditProjectView.vue

@@ -33,17 +33,26 @@
       class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
       rows="5"
       v-model="description"
+      maxlength="500"
     ></textarea>
     <div class="text-xs text-slate-500 italic -mt-3 mb-4">
-      88/500 max. characters
+      {{ description.length }}/500 max. characters
     </div>
 
     <div class="mt-8">
       <button
+        :disabled="isHiddenSave"
         class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
         @click="onSaveProjectClick()"
       >
-        Save Project
+        <!-- SHOW if in idle state -->
+        <span :class="{ hidden: isHiddenSave }">Save Project</span>
+
+        <!-- SHOW if in saving state; DISABLE button while in saving state -->
+        <span :class="{ hidden: isHiddenSpinner }"
+          ><i class="fa-solid fa-spinner fa-spin-pulse"></i>
+          Saving&hellip;</span
+        >
       </button>
       <button
         type="button"
@@ -96,6 +105,8 @@ export default class NewEditProjectView extends Vue {
   alertMessage = "";
 
   projectId = localStorage.getItem("projectId") || "";
+  isHiddenSave = false;
+  isHiddenSpinner = true;
 
   async created() {
     if (this.projectId === "") {
@@ -222,6 +233,8 @@ export default class NewEditProjectView extends Vue {
   }
 
   public async onSaveProjectClick() {
+    this.isHiddenSave = true;
+    this.isHiddenSpinner = false;
     await db.open();
     const num_accounts = await db.accounts.count();
     if (num_accounts === 0) {