From b82ea72f255efb504f1153958c4d6e72fc5077db Mon Sep 17 00:00:00 2001
From: "Parsa Yazdani (Quix)" <parsa@yazdani.au>
Date: Sun, 9 Mar 2025 21:16:56 +1100
Subject: [PATCH] loading indicator

---
 index.html | 19 +++++++++++--------
 styles.css | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index 519eff4..a8d7245 100644
--- a/index.html
+++ b/index.html
@@ -164,15 +164,18 @@
             }
             
             const proposalInput = document.getElementById('proposal-input');
-if (proposalInput) {
-    proposalInput.placeholder = 'Drop your revolutionary idea here... (280 character limit)';
-}
+                if (proposalInput) {
+                    proposalInput.placeholder = 'Drop your revolutionary idea here... (280 character limit)';
+                }
 
-const postButton = document.getElementById('post-button');
-if (postButton) {
-    postButton.textContent = 'Launch Rebellion';
-}
-}
+                const postButton = document.getElementById('post-button');
+                if (postButton) {
+                    const loadingIndicator = document.createElement('div');
+                    loadingIndicator.classList.add('lds-dual-ring')
+                    postButton.appendChild(loadingIndicator);
+                    postButton.innerText = 'Launch Rebellion';
+                }
+            }
         
         // Load user data
         async function loadUserData() {
diff --git a/styles.css b/styles.css
index 0b2e1a6..5887e19 100644
--- a/styles.css
+++ b/styles.css
@@ -1116,4 +1116,34 @@
     .music-prompt.visible {
         opacity: 1;
         transform: translateY(0);
-    }
\ No newline at end of file
+    }
+
+.lds-dual-ring,
+.lds-dual-ring:after {
+  box-sizing: border-box;
+}
+.lds-dual-ring {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+}
+.lds-dual-ring:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 6.4px solid currentColor;
+  border-color: currentColor transparent currentColor transparent;
+  animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+