From f5f592917afc31f61f402bf65e34d885ee7febd7 Mon Sep 17 00:00:00 2001
From: David Ascanio <david.ascanio@sandinas.com.ar>
Date: Fri, 20 Feb 2026 10:56:45 -0300
Subject: [PATCH] loading button

---
 .gitignore                             |  2 +-
 src/components/section/FormContact.vue | 92 ++++++++++++++++++++++++--
 2 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 04ba26a..7cc608c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,4 @@ pnpm-debug.log*
 .idea/
 
 /generated/prisma
-/prisma/dev.db
\ No newline at end of file
+/prisma/*.db
\ No newline at end of file
diff --git a/src/components/section/FormContact.vue b/src/components/section/FormContact.vue
index 1c13b52..0d76145 100644
--- a/src/components/section/FormContact.vue
+++ b/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,
     });
 
+    if (!response.ok) throw new Error();
+
     e.target.reset();
-    
-    if (!response.ok)
-        throw new Error();
+    isSuccess.value = true;
+
+    setTimeout(() => {
+      isSuccess.value = false;
+    }, 3500);
+
   } 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>
\ No newline at end of file