💄 Show loading indicator while adding link

client/components/Icon/loadingAnimated.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+  >
+    <path :fill="color" d="m88.22837,49.15743c0,-20.26882 -16.43849,-36.70731 -36.70731,-36.70731s-36.70731,16.43849 -36.70731,36.70731m6.22428,0c0,-16.75769 13.56574,-30.48303 30.48303,-30.48303s30.48303,13.72535 30.48303,30.48303">
+      <animateTransform
+        attributeName="transform"
+        attributeType="XML"
+        type="rotate"
+        dur="1s"
+        from="0 50 50"
+        to="360 50 50"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+</template>
+
+<script>
+export default {
+	props: {
+		color: {
+			type: String,
+			default: 'currentColor'
+		}
+	}
+}
+</script>

client/components/Modal/AddLink.vue

@@ -19,9 +19,12 @@
         @close="closeDropdown"
       ></v-select>
     </div>
-    <button v-shortkey="['enter']" class="primary-button" @click="add" @shortkey="add">
+    <button v-if="!isLoading" v-shortkey="['enter']" class="primary-button" @click="add" @shortkey="add">
       <Icon name="add" />Add Link
     </button>
+    <button v-else class="primary-button">
+      <Icon name="loadingAnimated" />Adding Link...
+    </button>
     <p v-if="invalidLinkErr" class="error">
       Error: {{ invalidLinkErr }}
     </p>
@@ -54,6 +57,9 @@ export default {
 		},
 		crates() {
 			return this.$store.state.crates
+		},
+		isLoading() {
+			return this.$nuxt.$loading.show
 		}
 	},
 	beforeDestroy() {