feat: loading indicators

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/routes/LoginWithOAuthApp.tsx

@@ -78,6 +78,7 @@ export const LoginWithOAuthAppRoute: FC = () => {
   const { loginWithOAuthApp } = useContext(AppContext);
 
   const [maskToken, setMaskToken] = useState(true);
+  const [isVerifyingCredentials, setIsVerifyingCredentials] = useState(false);
 
   const [formData, setFormData] = useState({
     hostname: 'github.com' as Hostname,
@@ -92,13 +93,16 @@ export const LoginWithOAuthAppRoute: FC = () => {
   }, [errors]);
 
   const handleSubmit = async () => {
+    setIsVerifyingCredentials(true);
+
     const newErrors = validateForm(formData);
 
     setErrors(newErrors);
 
     if (!newErrors.hostname && !newErrors.clientId && !newErrors.clientSecret) {
       verifyLoginCredentials(formData);
     }
+    setIsVerifyingCredentials(false);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -249,6 +253,7 @@ export const LoginWithOAuthAppRoute: FC = () => {
           variant="primary"
           leadingVisual={SignInIcon}
           onClick={handleSubmit}
+          loading={isVerifyingCredentials}
           data-testid="login-submit"
         >
           Login

src/renderer/routes/LoginWithPersonalAccessToken.tsx

@@ -70,6 +70,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
   const { loginWithPersonalAccessToken } = useContext(AppContext);
 
   const [maskClientSecret, setMaskClientSecret] = useState(true);
+  const [isVerifyingCredentials, setIsVerifyingCredentials] = useState(false);
 
   const [formData, setFormData] = useState({
     hostname: 'github.com' as Hostname,
@@ -83,13 +84,15 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
   }, [errors]);
 
   const handleSubmit = async () => {
+    setIsVerifyingCredentials(true);
     const newErrors = validateForm(formData);
 
     setErrors(newErrors);
 
     if (!newErrors.hostname && !newErrors.token) {
       verifyLoginCredentials(formData);
     }
+    setIsVerifyingCredentials(false);
   };
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -240,6 +243,7 @@ export const LoginWithPersonalAccessTokenRoute: FC = () => {
           variant="primary"
           leadingVisual={SignInIcon}
           onClick={handleSubmit}
+          loading={isVerifyingCredentials}
           data-testid="login-submit"
         >
           Login