fix: loading in account linking

tiki-deprecated · Oct 6, 2023 · b0df6bb · b0df6bb
1 parent 6517658
commit b0df6bb
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/components/button/button-text.vue b/src/components/button/button-text.vue
@@ -18,6 +18,11 @@ const props = defineProps({
     required: false,
     default: "STANDARD",
   },
+  isLoading: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
 });
 const click = () => {
   if (props.state != ButtonTextState.DISABLED) emit("click");
@@ -31,15 +36,34 @@ const click = () => {
       standard: state === ButtonTextState.STANDARD,
       boring: state === ButtonTextState.BORING,
       alert: state === ButtonTextState.ALERT,
-      disable: state === ButtonTextState.DISABLED,
+      disable: state === ButtonTextState.DISABLED
     }"
     @click.stop.prevent="click"
   >
-    {{ text }}
+  <div id="loading" v-if="isLoading"/>{{ text }}
   </button>
 </template>
 
 <style scoped>
+
+#loading {
+  display: inline-block;
+  width: 1.4em;
+  height: 1.4em;
+  border: 3px solid rgba(255,255,255,.3);
+  border-radius: 50%;
+  margin-right: 0.7em;
+  border-top-color: #fff;
+  animation: spin 1s ease-in-out infinite;
+  -webkit-animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  to { -webkit-transform: rotate(360deg); }
+} 
 .textButton {
   width: 100%;
   height: 2.7em;

diff --git a/src/components/sheet/sheet-add-gmail.vue b/src/components/sheet/sheet-add-gmail.vue
@@ -26,16 +26,20 @@ const canSubmit = computed(
     form.value.password?.length > 0,
 );
 
+const isLoading = ref<boolean>(false)
+
 const submit = async () => {
+  isLoading.value = true
+  error.value = "";
   try {
     await tiki.capture.login(form.value);
-    tiki.capture.scan().catch((error) => console.error(error.toString()));
-    error.value = "";
     form.value = { username: "", password: "", type: GMAIL };
+    tiki.capture.scan().catch((error) => console.error(error.toString()));
     emit("back");
   } catch (err: any) {
     error.value = err.toString();
   }
+  isLoading.value = false
 };
 </script>
 
@@ -54,8 +58,9 @@ const submit = async () => {
     />
     <text-button
       text="Connect Gmail"
-      :state="canSubmit ? ButtonTextState.STANDARD : ButtonTextState.DISABLED"
+      :state="canSubmit && !isLoading ? ButtonTextState.STANDARD  : ButtonTextState.DISABLED"
       @click="submit"
+      :isLoading="isLoading"
     />
   </div>
 </template>
diff --git a/src/components/sheet/sheet-add-retailer.vue b/src/components/sheet/sheet-add-retailer.vue
@@ -27,16 +27,20 @@ const canSubmit = computed(
     form.value.password?.length > 0,
 );
 
+const isLoading = ref<boolean>(false)
+
 const submit = async () => {
+  isLoading.value = true
+  error.value = "";
   try {
     await tiki.capture.login(form.value);
-    tiki.capture.scan().catch((error) => console.error(error.toString()));
-    error.value = "";
     form.value = { username: "", password: "", type: AMAZON };
+    tiki.capture.scan().catch((error) => console.error(error.toString()));
     emit("back");
   } catch (err: any) {
     error.value = err.toString();
   }
+  isLoading.value = false
 };
 </script>
 
@@ -56,8 +60,9 @@ const submit = async () => {
     />
     <text-button
       text="Connect Retailer"
-      :state="canSubmit ? ButtonTextState.STANDARD : ButtonTextState.DISABLED"
+      :state="canSubmit && !isLoading ? ButtonTextState.STANDARD  : ButtonTextState.DISABLED"
       @click="submit"
+      :isLoading="isLoading"
     />
   </div>
 </template>