From 6023a8a3144a7a6b883b9a102b48c40fa4764416 Mon Sep 17 00:00:00 2001
From: Bailey Pumfleet <bpumfleet@gmail.com>
Date: Thu, 27 May 2021 21:34:02 +0100
Subject: [PATCH] Add loading spinner to book button

---
 components/ui/Button.tsx | 17 +++++++++++++++++
 pages/[user]/book.tsx    |  3 ++-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 components/ui/Button.tsx

diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
new file mode 100644
index 00000000..80777b09
--- /dev/null
+++ b/components/ui/Button.tsx
@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+export default function Button(props) {
+    const [loading, setLoading] = useState(false);
+
+    return(
+        <button type="submit" className="btn btn-primary" onClick={setLoading}>
+            {!loading && props.children}
+            {loading && 
+                <svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+            }
+        </button>
+    );
+}
\ No newline at end of file
diff --git a/pages/[user]/book.tsx b/pages/[user]/book.tsx
index c84d0ab2..4a9ed353 100644
--- a/pages/[user]/book.tsx
+++ b/pages/[user]/book.tsx
@@ -12,6 +12,7 @@ import 'react-phone-number-input/style.css';
 import PhoneInput from 'react-phone-number-input';
 import { LocationType } from '../../lib/location';
 import Avatar from '../../components/Avatar';
+import Button from '../../components/ui/Button';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -144,7 +145,7 @@ export default function Book(props) {
                                     <textarea name="notes" id="notes" rows={3}  className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting."></textarea>
                                 </div>
                                 <div>
-                                    <button type="submit" className="btn btn-primary">Confirm</button>
+                                    <Button type="submit" className="btn btn-primary">Confirm</Button>
                                     <Link href={"/" + props.user.username + "/" + props.eventType.slug}>
                                         <a className="ml-2 btn btn-white">Cancel</a>
                                     </Link>