feat: Auth form visual enhancements - remove css changes, rename const

- Hide preloaders for third party auth providers if they disabled
- Suggested usernames container enlargement for mathing to neighboring inputs

src/login/LoginPage.jsx

@@ -167,6 +167,7 @@ class LoginPage extends React.Component {
     const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
     const isSocialAuthActive = !!providers.length && !currentProvider;
     const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+    const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -184,7 +185,7 @@ class LoginPage extends React.Component {
           </Hyperlink>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
           <Skeleton className="tpa-skeleton mb-3" height={30} count={2} />
         ) : (
           <>

src/register/RegistrationPage.jsx

@@ -131,10 +131,20 @@ class RegistrationPage extends React.Component {
 
       // Exemption for country field's value as we need to set updated value from the store.
       if (focusedField === 'country') { focusedField = ''; }
-      const { [focusedField]: _, ...registrationData } = { ...nextProps.registrationFormData, ...nextState };
-      this.setState({
-        ...registrationData,
-      });
+
+      // For username field's value as we need to wait for usernameSuggestions.
+      // Otherwise, an infinite state update loop error appears.
+      if (focusedField === 'username') {
+        this.setState({
+          ...nextProps.registrationFormData,
+          ...nextState,
+        });
+      } else {
+        const { [focusedField]: _, ...registrationData } = { ...nextProps.registrationFormData, ...nextState };
+        this.setState({
+          ...registrationData,
+        });
+      }
     }
 
     if (this.props.usernameSuggestions.length > 0 && this.state.username === '') {
@@ -607,6 +617,7 @@ class RegistrationPage extends React.Component {
     const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
     const isSocialAuthActive = !!providers.length && !currentProvider;
     const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+    const isThirdPartyAuthActive = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -616,7 +627,7 @@ class RegistrationPage extends React.Component {
           </div>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && isThirdPartyAuthActive ? (
           <Skeleton className="tpa-skeleton" height={36} count={2} />
         ) : (
           <>