Add loading state for async retrieval of git config

app/src/ui/lib/configure-git-user.tsx

@@ -21,6 +21,7 @@ import { RadioButton } from './radio-button'
 import { Select } from './select'
 import { GitEmailNotFoundWarning } from './git-email-not-found-warning'
 import { getDotComAPIEndpoint } from '../../lib/api'
+import { Loading } from './loading'
 
 interface IConfigureGitUserProps {
   /** The logged-in accounts. */
@@ -53,6 +54,8 @@ interface IConfigureGitUserState {
    * choice to delete the lock file.
    */
   readonly existingLockFilePath?: string
+
+  readonly loadingGitConfig: boolean
 }
 
 /**
@@ -82,6 +85,7 @@ export class ConfigureGitUser extends React.Component<
       gitHubName: account?.name || account?.login || '',
       gitHubEmail:
         this.account !== null ? lookupPreferredEmail(this.account) : '',
+      loadingGitConfig: true,
     }
   }
 
@@ -113,6 +117,7 @@ export class ConfigureGitUser extends React.Component<
           prevState.manualEmail.length === 0
             ? globalUserEmail || ''
             : prevState.manualEmail,
+        loadingGitConfig: false,
       }),
       () => {
         // Chances are low that we actually have an account at mount-time
@@ -325,20 +330,30 @@ export class ConfigureGitUser extends React.Component<
   private renderGitConfigForm() {
     return (
       <Form className="sign-in-form" onSubmit={this.save}>
-        <TextBox
-          label="Name"
-          placeholder="Your Name"
-          value={this.state.manualName}
-          onValueChanged={this.onNameChange}
-        />
+        {this.state.loadingGitConfig && (
+          <div className="git-config-loading">
+            <Loading /> Checking for an existing git config…
+          </div>
+        )}
+        {!this.state.loadingGitConfig && (
+          <>
+            <TextBox
+              label="Name"
+              placeholder="Your Name"
+              onValueChanged={this.onNameChange}
+              value={this.state.manualName}
+              autoFocus={true}
+            />
 
-        <TextBox
-          type="email"
-          label="Email"
-          placeholder="your-email@example.com"
-          value={this.state.manualEmail}
-          onValueChanged={this.onEmailChange}
-        />
+            <TextBox
+              type="email"
+              label="Email"
+              placeholder="your-email@example.com"
+              value={this.state.manualEmail}
+              onValueChanged={this.onEmailChange}
+            />
+          </>
+        )}
 
         {this.account !== null && (
           <GitEmailNotFoundWarning

app/styles/ui/_configure-git-user.scss

@@ -34,4 +34,9 @@
       border-bottom: none;
     }
   }
+
+  .git-config-loading {
+    color: var(--text-secondary-color);
+    height: 107px; // Height of name/email input to prevent jumping
+  }
 }