From 36c3c751054b8d4d22b7e04510fdbb0ac0470595 Mon Sep 17 00:00:00 2001
From: Hayley Witherell <hayleywitherell@gmail.com>
Date: Mon, 2 Dec 2024 10:31:43 -0700
Subject: [PATCH 1/2] Add loading icons to iframes

---
 src/contact.html     |  5 ++---
 src/events.html      |  6 +++---
 src/scripts/app.js   | 10 ++++++++++
 src/styles/style.css | 22 +++++++++++++++++++++-
 4 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/contact.html b/src/contact.html
index f4a4d1e..1d53f6a 100644
--- a/src/contact.html
+++ b/src/contact.html
@@ -6,10 +6,9 @@
 
 <h1>Contact</h1>
 
+<div class="loading-icon"></div>
 <iframe
   class="contact-form"
   src="https://docs.google.com/forms/d/e/1FAIpQLSendg9Er7RWxs1AAUPJ7pL6K-QwXfz6uKZFKIXzG1nCiXRrvQ/viewform?embedded=true&showTitle=0"
   frameborder="0"
->
-  Loading Google Form...
-</iframe>
+></iframe>
diff --git a/src/events.html b/src/events.html
index 7ff1126..1d88e0f 100644
--- a/src/events.html
+++ b/src/events.html
@@ -5,10 +5,10 @@
 ---
 
 <h1>Events</h1>
+
+<div class="loading-icon"></div>
 <iframe
   class="calendar"
   src="https://calendar.google.com/calendar/embed?&showCalendars=0&showPrint=0&showDate=0&showNav=0&showTitle=0&src=bmRpdGNvbW11bml0eUBnbWFpbC5jb20&src=YWRkcmVzc2Jvb2sjY29udGFjdHNAZ3JvdXAudi5jYWxlbmRhci5nb29nbGUuY29t"
   scrolling="no"
->
-  Loading Google Calendar...
-</iframe>
+></iframe>
diff --git a/src/scripts/app.js b/src/scripts/app.js
index 8685621..4cfb94b 100644
--- a/src/scripts/app.js
+++ b/src/scripts/app.js
@@ -30,4 +30,14 @@ $(document).ready(() => {
     localStorage.setItem('theme', newTheme);
     applyTheme(newTheme);
   });
+
+  // iframe loading
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    setTimeout(() => {
+      iframe.style.visibility = 'visible';
+      const loadingIcon = document.querySelector('.loading-icon');
+      loadingIcon.style.display = 'none';
+    }, 2000);
+  }
 });
diff --git a/src/styles/style.css b/src/styles/style.css
index f90a4a8..42ca939 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -341,6 +341,7 @@ iframe {
   border-radius: 1rem;
   background-color: var(--white);
   overflow: hidden;
+  visibility: hidden;
 }
 
 .day-mode iframe {
@@ -352,6 +353,25 @@ iframe {
   box-shadow: 0px 4px 6px rgba(128, 128, 128, 0.45);
 }
 
+.loading-icon {
+  width: 50px;
+  height: 50px;
+  border: 5px solid var(--day-blue);
+  border-top: 5px solid var(--day-purple);
+  border-radius: 50%;
+  animation: spin 3s linear infinite;
+  margin: 0 auto;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* home */
 
 .tagline {
@@ -505,6 +525,6 @@ body.day-mode footer {
   }
 
   .contact-form {
-    height: 50rem;
+    height: 30rem;
   }
 }

From 036eaa0463409d15b98a5924780ff1edcd1a5ebc Mon Sep 17 00:00:00 2001
From: Hayley Witherell <hayleywitherell@gmail.com>
Date: Mon, 2 Dec 2024 11:31:53 -0700
Subject: [PATCH 2/2] Keep original contact form height

---
 src/styles/style.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/style.css b/src/styles/style.css
index 42ca939..d218559 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -525,6 +525,6 @@ body.day-mode footer {
   }
 
   .contact-form {
-    height: 30rem;
+    height: 50rem;
   }
 }