feat: loading state on urql actions

packages/hoppscotch-app/components/teams/Add.vue

@@ -19,7 +19,11 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="t('action.save')" @click.native="addNewTeam" />
+        <ButtonPrimary
+          :label="t('action.save')"
+          :loading="isLoading"
+          @click.native="addNewTeam"
+        />
         <ButtonSecondary
           :label="t('action.cancel')"
           @click.native="hideModal"
@@ -51,12 +55,15 @@ const emit = defineEmits<{
 
 const name = ref<string | null>(null)
 
-const addNewTeam = () =>
-  pipe(
-    TeamNameCodec.decode(name.value), // Perform decode (returns either)
-    TE.fromEither, // Convert either to a task either
-    TE.mapLeft(() => "invalid_name" as const), // Failure above is an invalid_name, give it an identifiable value
-    TE.chainW(createTeam), // Create the team
+const isLoading = ref(false)
+
+const addNewTeam = async () => {
+  isLoading.value = true
+  await pipe(
+    TeamNameCodec.decode(name.value),
+    TE.fromEither,
+    TE.mapLeft(() => "invalid_name" as const),
+    TE.chainW(createTeam),
     TE.match(
       (err) => {
         // err is of type "invalid_name" | GQLError<Err>
@@ -72,6 +79,8 @@ const addNewTeam = () =>
       }
     )
   )()
+  isLoading.value = false
+}
 
 const hideModal = () => {
   name.value = null