From 9d2a13c9ab3a23ff86c60c84a8e8c40af5f8eb21 Mon Sep 17 00:00:00 2001
From: Ralksta <16941050+ralksta@users.noreply.github.com>
Date: Sun, 31 May 2026 10:04:15 +0200
Subject: [PATCH] I have added a loading spinner to the PasswordGate
 confirmation button. (#176)

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 components/PasswordGate.module.css | 17 +++++++++++++++++
 components/PasswordGate.tsx        | 23 ++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/components/PasswordGate.module.css b/components/PasswordGate.module.css
index ed90c8f..2653be7 100644
--- a/components/PasswordGate.module.css
+++ b/components/PasswordGate.module.css
@@ -90,6 +90,23 @@
   font-weight: 400;
 }
 
+.spinner {
+  animation: spin 1s linear infinite;
+  display: inline-block;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 /* ── Responsive ──────────────────────────────────── */
 @media (max-width: 640px) {
   .card {
diff --git a/components/PasswordGate.tsx b/components/PasswordGate.tsx
index 5db6859..9335888 100644
--- a/components/PasswordGate.tsx
+++ b/components/PasswordGate.tsx
@@ -66,7 +66,28 @@ export default function PasswordGate({ slug, title, type = 'subpage' }: Password
             aria-describedby={error ? 'password-error' : undefined}
           />
           <button type="submit" className={styles.button} disabled={loading}>
-            {loading ? 'Verifying…' : 'Enter'}
+            {loading ? (
+              <>
+                <svg
+                  aria-hidden="true"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className={styles.spinner}
+                >
+                  <circle cx="12" cy="12" r="10" strokeOpacity="0.25"></circle>
+                  <path d="M12 2a10 10 0 0 1 10 10"></path>
+                </svg>
+                Verifying…
+              </>
+            ) : (
+              'Enter'
+            )}
           </button>
         </form>