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

@@ -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 {

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>