From 52e6f7b522c2c1bc775447190383b3186b6619ae Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Sun, 2 Mar 2025 04:50:42 +0000
Subject: [PATCH] better form

---
 packages/client/src/hooks/useAuth.tsx   | 10 +++-
 packages/client/src/pages/LoginPage.tsx | 79 +++++++++++++++++++------
 2 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/packages/client/src/hooks/useAuth.tsx b/packages/client/src/hooks/useAuth.tsx
index 7fe187e..927689a 100644
--- a/packages/client/src/hooks/useAuth.tsx
+++ b/packages/client/src/hooks/useAuth.tsx
@@ -75,7 +75,15 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     setError(null)
 
     try {
-      const result = await api.login(handle)
+      // Add a small artificial delay for UX purposes
+      const loginPromise = api.login(handle)
+      
+      // Ensure the loading state shows for at least 800ms for better UX
+      const result = await Promise.all([
+        loginPromise,
+        new Promise(resolve => setTimeout(resolve, 800))
+      ]).then(([loginResult]) => loginResult)
+      
       return result
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Login failed'
diff --git a/packages/client/src/pages/LoginPage.tsx b/packages/client/src/pages/LoginPage.tsx
index 2f6b897..2974dc7 100644
--- a/packages/client/src/pages/LoginPage.tsx
+++ b/packages/client/src/pages/LoginPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
+import { useMutation } from '@tanstack/react-query'
 
 import Header from '#/components/Header'
 import { useAuth } from '#/hooks/useAuth'
@@ -7,26 +8,42 @@ import { useAuth } from '#/hooks/useAuth'
 const LoginPage = () => {
   const [handle, setHandle] = useState('')
   const [error, setError] = useState<string | null>(null)
-  const { login, loading } = useAuth()
+  const { login } = useAuth()
 
-  const handleSubmit = async (e: React.FormEvent) => {
+  const mutation = useMutation({
+    mutationFn: async (handleValue: string) => {
+      const result = await login(handleValue)
+
+      // Add a small delay before redirecting for better UX
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      return result
+    },
+    onSuccess: (data) => {
+      // Redirect to ATProto OAuth flow
+      window.location.href = data.redirectUrl
+    },
+    onError: (err) => {
+      const message = err instanceof Error ? err.message : 'Login failed'
+      setError(message)
+    },
+  })
+
+  const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
+    setError(null)
 
     if (!handle.trim()) {
       setError('Handle cannot be empty')
       return
     }
 
-    try {
-      const { redirectUrl } = await login(handle)
-      // Redirect to ATProto OAuth flow
-      window.location.href = redirectUrl
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Login failed'
-      setError(message)
-    }
+    mutation.mutate(handle)
   }
 
+  // count success as also pending, since the browser should be redirecting
+  const pending = mutation.isPending || mutation.isSuccess
+
   return (
     <div className="flex flex-col gap-8">
       <Header />
@@ -42,7 +59,10 @@ const LoginPage = () => {
 
         <form onSubmit={handleSubmit}>
           <div className="mb-4">
-            <label htmlFor="handle" className="block mb-2 text-gray-700 dark:text-gray-300">
+            <label
+              htmlFor="handle"
+              className="block mb-2 text-gray-700 dark:text-gray-300"
+            >
               Enter your Bluesky handle:
             </label>
             <input
@@ -51,19 +71,44 @@ const LoginPage = () => {
               value={handle}
               onChange={(e) => setHandle(e.target.value)}
               placeholder="example.bsky.social"
-              disabled={loading}
-              className="w-full p-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500"
+              disabled={pending}
+              className="w-full p-3 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 transition-colors"
             />
           </div>
 
           <button
             type="submit"
-            disabled={loading}
-            className={`w-full px-4 py-2 rounded-md bg-blue-500 dark:bg-blue-600 text-white font-medium hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 ${
-              loading ? 'opacity-70 cursor-not-allowed' : ''
+            disabled={pending}
+            className={`w-full px-4 py-2 rounded-md bg-blue-500 dark:bg-blue-600 text-white font-medium hover:bg-blue-600 dark:hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-500 relative ${
+              pending ? 'opacity-90 cursor-not-allowed' : ''
             }`}
           >
-            {loading ? 'Logging in...' : 'Login'}
+            <span className={pending ? 'invisible' : ''}>Login</span>
+            {pending && (
+              <span className="absolute inset-0 flex items-center justify-center">
+                <svg
+                  className="animate-spin -ml-1 mr-2 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"
+                    strokeWidth="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>
+                <span>Connecting...</span>
+              </span>
+            )}
           </button>
         </form>
 
-- 
2.51.2