From a69f75dd2e02c7d52cf3c56ae8fe242c5774c80d Mon Sep 17 00:00:00 2001
From: hannakim91 <hannakim91@gmail.com>
Date: Thu, 13 Oct 2022 14:19:27 -0700
Subject: [PATCH 1/2] wip: dynamic submit button

---
 src/components/ContactForm.tsx | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
index e98f497..d87833a 100644
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -1,18 +1,24 @@
 import type { Component } from 'solid-js';
+import { createSignal } from 'solid-js';
 import toast, { Toaster } from 'solid-toast';
 import { useForm } from '../utils/validation.jsx';
 import './ContactForm.scss';
 
 export const ContactForm: Component = () => {
+  const [loading, setLoading] = createSignal(false);
+  console.log('loading', loading());
   function _successMessage() {
+    setLoading(false);
     toast.success("Thanks for contacting us! We'll be in touch shortly.");
   }
 
   function _errorMessage() {
+    setLoading(false);
     toast.error('Something went wrong :(. Please refresh and try again.');
   }
 
   const sendContactRequest = async function (form) {
+    setLoading(true);
     const formData = new FormData(form);
 
     return fetch('https://shipshape.io/', {
@@ -28,6 +34,24 @@ export const ContactForm: Component = () => {
     errorClass: 'error-input'
   });
 
+  const SubmitButton = () => (
+    <input
+      disabled={Object.keys(errors).length}
+      type="submit"
+      value="Send Message"
+      class="btn btn-red cursor-pointer inline-flex justify-center border border-transparent transition-colors font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
+    />
+  );
+
+  const LoadingButton = () => (
+    <input
+      disabled
+      type="submit"
+      value="Loading..."
+      class="btn btn-red cursor-pointer inline-flex justify-center border border-transparent transition-colors font-medium rounded-md disabled:cursor-not-allowed"
+    />
+  );
+
   const ErrorMessage = (props) => (
     <span class="error-message">{props.error}</span>
   );
@@ -140,13 +164,7 @@ export const ContactForm: Component = () => {
 
           {errors.description && <ErrorMessage error={errors.description} />}
         </div>
-
-        <input
-          disabled={Object.keys(errors).length}
-          type="submit"
-          value="Send Message"
-          class="btn btn-red cursor-pointer inline-flex justify-center border border-transparent transition-colors font-medium rounded-md disabled:opacity-50 disabled:cursor-not-allowed"
-        />
+        {loading() ? <LoadingButton /> : <SubmitButton />}
       </form>
 
       <Toaster

From 08d04250bd3023fe09d07a61d746c714eaca3f49 Mon Sep 17 00:00:00 2001
From: hannakim91 <hannakim91@gmail.com>
Date: Thu, 13 Oct 2022 16:42:28 -0700
Subject: [PATCH 2/2] wip css loading ring

---
 src/components/ContactForm.scss | 36 +++++++++++++++++++++++++++++++++
 src/components/ContactForm.tsx  | 22 +++++++++++++-------
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/src/components/ContactForm.scss b/src/components/ContactForm.scss
index a788be6..1709322 100644
--- a/src/components/ContactForm.scss
+++ b/src/components/ContactForm.scss
@@ -18,3 +18,39 @@
   margin: 0 !important;
   text-align: center;
 }
+
+.lds-ring {
+  display: inline-block;
+  // position: absolute;
+  width: 32px;
+  height: 32px;
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  margin: 3px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/ContactForm.tsx b/src/components/ContactForm.tsx
index d87833a..ffbbded 100644
--- a/src/components/ContactForm.tsx
+++ b/src/components/ContactForm.tsx
@@ -6,7 +6,7 @@ import './ContactForm.scss';
 
 export const ContactForm: Component = () => {
   const [loading, setLoading] = createSignal(false);
-  console.log('loading', loading());
+
   function _successMessage() {
     setLoading(false);
     toast.success("Thanks for contacting us! We'll be in touch shortly.");
@@ -44,12 +44,19 @@ export const ContactForm: Component = () => {
   );
 
   const LoadingButton = () => (
-    <input
+    <button
+      type="button"
+      class="btn btn-red cursor-pointer flex relative justify-center border border-transparent transition-colors font-medium rounded-md disabled:cursor-not-allowed"
       disabled
-      type="submit"
-      value="Loading..."
-      class="btn btn-red cursor-pointer inline-flex justify-center border border-transparent transition-colors font-medium rounded-md disabled:cursor-not-allowed"
-    />
+    >
+      <div class="lds-ring">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <div>Loading...</div>
+    </button>
   );
 
   const ErrorMessage = (props) => (
@@ -164,7 +171,8 @@ export const ContactForm: Component = () => {
 
           {errors.description && <ErrorMessage error={errors.description} />}
         </div>
-        {loading() ? <LoadingButton /> : <SubmitButton />}
+        {/* {loading() ? <LoadingButton /> : <SubmitButton />} */}
+        <LoadingButton />
       </form>
 
       <Toaster