Merge pull request 'loading-send' (#13) from loading-send into main

Reviewed-on: #13

.gitignore

@@ -23,3 +23,4 @@ pnpm-debug.log*
 .idea/
 
 /generated/prisma
+/prisma/*.db

src/components/section/FormContact.vue

@@ -1,28 +1,60 @@
 <script setup>
 import { Icon } from "@iconify/vue";
 import { createTranslator } from "../../i18n";
-
+import { ref, computed } from "vue";
 const props = defineProps({
   locale: String
 });
 
 const tl = createTranslator(props.locale);
+const isLoading = ref(false);
+const isSuccess = ref(false);
+const isError = ref(false);
+
+const dashOffset = ref(453);
+
+const dashStyle = computed(() => ({
+  stroke: "#1ecd97",
+  fill: "white",
+  strokeDasharray: 453,
+  strokeDashoffset: dashOffset.value,
+  transition: "stroke-dashoffset 1.2s ease"
+}));
 
 const handleSubmit = async (e) => {
   const formData = new FormData(e.target);
 
+  isLoading.value = true;
+  isSuccess.value = false;
+  isError.value = false;
+
   try {
     const response = await fetch("/api/emailInfo/send", {
       method: "POST",
       body: formData,
     });
 
-    e.target.reset();
+    if (!response.ok) throw new Error();
+
+    e.target.reset();
+    isSuccess.value = true;
+
+    setTimeout(() => {
+      isSuccess.value = false;
+    }, 3500);
 
-    if (!response.ok)
-        throw new Error();
   } catch (error) {
     console.error(error);
+    isError.value = true;
+
+    setTimeout(() => {
+      isError.value = false;
+    }, 3500);
+
+  } finally {
+    setTimeout(() => {
+      isLoading.value = false;
+    }, 2000);
   }
 };
 </script>
@@ -92,11 +124,59 @@ const handleSubmit = async (e) => {
       <!-- Submit -->
       <button
         type="submit"
-        class="bg-[#003421] px-6 py-2 text-sm hover:bg-[#EBE5D0] hover:text-[#003421] cursor-pointer transition duration-300"
+        :disabled="isLoading"
+        class="bg-[#003421] px-6 py-2 text-sm cursor-pointer transition duration-300"
+        :class="[
+          isLoading ? 'opacity-70 cursor-not-allowed' : 'hover:bg-[#EBE5D0] hover:text-[#003421]',
+          isError ? 'bg-red-600 text-white' : ''
+        ]"
       >
-        {{ tl("footer.form.button") }}
+        <span v-if="isLoading" class="flex items-center gap-2">
+          <span class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+          Enviando...
+        </span>
+
+        <span v-else-if="isSuccess">
+          Enviado ✓
+        </span>
+
+        <span v-else-if="isError">
+          Error
+        </span>
+
+        <span v-else>
+          {{ tl("footer.form.button") }}
+        </span>
       </button>
 
     </div>
   </form>
 </template>
+
+<style scoped>
+.kk-submit {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-bg {
+  stroke: #c8c8c8;
+  fill: white;
+}
+
+.btn-color {
+  stroke-width: 4;
+}
+
+.textNode {
+  fill: #48727F;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 16px;
+}
+
+.checkNode {
+  fill: #1ecd97;
+  font-size: 22px;
+}
+</style>