feat: Auth form visual enhancements

- 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 ThirdPartyAuthPreloader = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -184,7 +185,7 @@ class LoginPage extends React.Component {
           </Hyperlink>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && ThirdPartyAuthPreloader ? (
           <Skeleton className="tpa-skeleton mb-3" height={30} count={2} />
         ) : (
           <>

src/register/RegistrationPage.jsx

@@ -617,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 ThirdPartyAuthPreloader = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
     return (
       <>
@@ -626,7 +627,7 @@ class RegistrationPage extends React.Component {
           </div>
         )}
 
-        {thirdPartyAuthApiStatus === PENDING_STATE ? (
+        {thirdPartyAuthApiStatus === PENDING_STATE && ThirdPartyAuthPreloader ? (
           <Skeleton className="tpa-skeleton" height={36} count={2} />
         ) : (
           <>

src/register/UsernameField.jsx

@@ -10,7 +10,7 @@ import messages from './messages';
 
 const UsernameField = (props) => {
   const { intl, usernameSuggestions, errorMessage } = props;
-  let className = '';
+  let className = 'suggested-usernames-wrapper';
   let suggestedUsernameDiv = <></>;
   let iconButton = <></>;
   const suggestedUsernames = () => (

src/sass/_style.scss

@@ -512,6 +512,10 @@ select.form-control {
     right: 0;
     position: relative;
   }
+
+  .content {
+    width: 100%;
+  }
 }
 
 .alert {
@@ -582,11 +586,21 @@ select.form-control {
   margin-bottom: 11%;
   margin-left: 15px;
 }
+
+.suggested-usernames-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
 .scroll-suggested-username {
-  width: 21rem;
   white-space: nowrap;
   overflow-x: auto;
   display: inline-flex;
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0.5rem;
+  }
 }
 
 .pgn__form-control-decorator-trailing {