A social knowledge tool for researchers built on ATProto

feat: add loading state to login page during authentication check

Co-authored-by: aider (anthropic/claude-sonnet-4-20250514) <aider@aider.chat>

+16
+16
src/webapp/app/login/page.tsx
··· 15 PasswordInput, 16 Text, 17 Group, 18 } from '@mantine/core'; 19 import { getAccessToken } from '@/services/auth'; 20 ··· 24 const [isLoading, setIsLoading] = useState(false); 25 const [error, setError] = useState(''); 26 const [useAppPassword, setUseAppPassword] = useState(false); 27 const router = useRouter(); 28 const searchParams = useSearchParams(); 29 const { setTokens, isAuthenticated } = useAuth(); ··· 43 } else if (isAuthenticated && !isExtensionLogin) { 44 // If user is already authenticated and not doing extension login, redirect to library 45 router.push('/library'); 46 } 47 }, [isExtensionLogin, isAuthenticated]); 48 ··· 130 setIsLoading(false); 131 } 132 }; 133 134 return ( 135 <Center h={'100svh'}>
··· 15 PasswordInput, 16 Text, 17 Group, 18 + Loader, 19 } from '@mantine/core'; 20 import { getAccessToken } from '@/services/auth'; 21 ··· 25 const [isLoading, setIsLoading] = useState(false); 26 const [error, setError] = useState(''); 27 const [useAppPassword, setUseAppPassword] = useState(false); 28 + const [isCheckingAuth, setIsCheckingAuth] = useState(true); 29 const router = useRouter(); 30 const searchParams = useSearchParams(); 31 const { setTokens, isAuthenticated } = useAuth(); ··· 45 } else if (isAuthenticated && !isExtensionLogin) { 46 // If user is already authenticated and not doing extension login, redirect to library 47 router.push('/library'); 48 + } else { 49 + // Auth check is complete, show the login form 50 + setIsCheckingAuth(false); 51 } 52 }, [isExtensionLogin, isAuthenticated]); 53 ··· 135 setIsLoading(false); 136 } 137 }; 138 + 139 + // Show loading while checking authentication status 140 + if (isCheckingAuth || isAuthenticated) { 141 + return ( 142 + <Center h={'100svh'}> 143 + <Stack align="center"> 144 + <Loader size="lg" /> 145 + </Stack> 146 + </Center> 147 + ); 148 + } 149 150 return ( 151 <Center h={'100svh'}>