✨ feat(appaddurlpreview.vue): add loading state to preview

src/components/AppAddUrl/AppAddUrl.vue

@@ -6,7 +6,7 @@ import { ADD_SAMPLE } from '@/graphql/mutations/samples'
 import type { Statement } from '@/entities/Statement'
 import { GET_STATEMENTS } from '@/graphql/queries/statements'
 import { useValidateOgUrl } from '@/composables/useValidateOgUrl'
-import AppAddUrlError from '@/components/AppAddUrl/AppAddUrlError.vue'
+import AppAddUrlError from '@/components/AppAddUrl/AppAddUrlSuccessError.vue'
 import AppAddUrlPreview from '@/components/AppAddUrl/AppAddUrlPreview.vue'
 
 const props = defineProps({
@@ -24,7 +24,11 @@ watch(data, (n) => {
   }
 })
 
-const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE, () => ({
+const {
+  loading: loadingMutation,
+  mutate: addSample,
+  error: mutationError
+} = useMutation(ADD_SAMPLE, () => ({
   variables: {
     objects: {
       statement_id: props.statement?.id,
@@ -54,6 +58,7 @@ const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE,
         required
         name="add-url"
         v-model="inputValue"
+        :disabled="loadingValidation || loadingMutation"
         placeholder="e.g https://dribbble.com/shots..."
         type="text"
       />
@@ -62,11 +67,16 @@ const { loading: loadingMutation, mutate: addSample } = useMutation(ADD_SAMPLE,
       :disabled="!canCreate || loadingValidation || loadingMutation"
       @click="validate(inputValue)"
     >
-      Add Inspiration ✨
+      {{ loadingValidation ? 'Validating URL...' : 'Add Inspiration ✨' }}
     </button>
   </div>
   <AppAddUrlError :msg="data?.error ? 'Provided URL is invalid ❌' : ''" />
-  <AppAddUrlPreview v-if="!data?.error && data?.data" :og-item="data.data" />
+  <AppAddUrlPreview
+    v-if="!data?.error && data?.data"
+    :og-item="data.data"
+    :loading="loadingMutation"
+    :has-error="!!mutationError"
+  />
 </template>
 
 <style lang="scss">

src/components/AppAddUrl/AppAddUrlPreview.vue

@@ -13,7 +13,9 @@ const ogUrl = computed(() => props.ogItem?.ogUrl ?? '')
 const props = defineProps({
   ogItem: {
     type: Object as PropType<OgItem>
-  }
+  },
+  loading: Boolean,
+  hasError: Boolean
 })
 </script>
 
@@ -25,6 +27,9 @@ const props = defineProps({
     :aria-description="ogDescription"
     class="AppAddUrlPreview font--fira"
   >
+    <div class="AppAddUrlPreview__overlay">
+      {{ !loading && !hasError ? 'Inspiration Added 🎉' : 'Adding URL...' }}
+    </div>
     <MdiCheckCircleOutline class="absolute right-1 top-1 text-green-400 text-xl" />
     <div
       class="AppAddUrlPreview__img"

src/components/AppAddUrl/_AppAddUrlPreview.scss

@@ -1,6 +1,8 @@
 .AppAddUrlPreview {
   @apply flex h-auto w-full bg-white border rounded-lg mb-4 transition-all overflow-hidden relative;
-
+  &__overlay {
+    @apply absolute w-full h-full bg-gradient-to-tr from-purple-900 to-transparent flex justify-center items-center text-white font-bold text-sm;
+  }
   &__img {
     @apply min-w-[33%] w-1/3 rounded-l-lg bg-cover;
   }