feat: Auth form visual enhancements

src/login/LoginPage.jsx

@@ -166,6 +166,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 (
       <>
@@ -183,7 +184,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/components/ThirdPartyAuth.jsx

@@ -25,6 +25,7 @@ const ThirdPartyAuth = (props) => {
   const isInstitutionAuthActive = !!secondaryProviders.length && !currentProvider;
   const isSocialAuthActive = !!providers.length && !currentProvider;
   const isEnterpriseLoginDisabled = getConfig().DISABLE_ENTERPRISE_LOGIN;
+  const ThirdPartyAuthPreloader = isSocialAuthActive || (isEnterpriseLoginDisabled && isInstitutionAuthActive);
 
   return (
     <>
@@ -34,7 +35,7 @@ const ThirdPartyAuth = (props) => {
         </div>
       )}
 
-      {thirdPartyAuthApiStatus === PENDING_STATE ? (
+      {thirdPartyAuthApiStatus === PENDING_STATE && ThirdPartyAuthPreloader ? (
         <Skeleton className="tpa-skeleton" height={36} count={2} />
       ) : (
         <>

src/register/registrationFields/UsernameField.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import { Button, Icon, IconButton } from '@edx/paragon';
+import { Close } from '@edx/paragon/icons';
+import PropTypes, { string } from 'prop-types';
+
+import { FormGroup } from '../../common-components';
+import messages from '../messages';
+
+const UsernameField = (props) => {
+  const {
+    intl, handleSuggestionClick, handleUsernameSuggestionClose, usernameSuggestions, errorMessage,
+  } = props;
+  let className = 'suggested-usernames-wrapper';
+  let suggestedUsernameDiv = <></>;
+  let iconButton = <></>;
+  const suggestedUsernames = () => (
+    <div className={className}>
+      <span className="text-gray username-suggestion-label">{intl.formatMessage(messages['registration.username.suggestion.label'])}</span>
+      <div className="scroll-suggested-username">
+        {usernameSuggestions.map((username, index) => (
+          <Button
+            type="button"
+            name="username"
+            variant="outline-dark"
+            className="username-suggestion data-hj-suppress"
+            autoComplete={props.autoComplete}
+            key={`suggestion-${index.toString()}`}
+            onClick={(e) => handleSuggestionClick(e, 'username', username)}
+          >
+            {username}
+          </Button>
+        ))}
+      </div>
+      {iconButton}
+    </div>
+  );
+  if (usernameSuggestions.length > 0 && errorMessage && props.value === ' ') {
+    className = 'suggested-username-with-error';
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
+    suggestedUsernameDiv = suggestedUsernames();
+  } else if (usernameSuggestions.length > 0 && props.value === ' ') {
+    className = 'suggested-username';
+    iconButton = <IconButton src={Close} iconAs={Icon} alt="Close" onClick={() => handleUsernameSuggestionClose()} variant="black" size="sm" className="suggested-username-close-button" />;
+    suggestedUsernameDiv = suggestedUsernames();
+  } else if (usernameSuggestions.length > 0 && errorMessage) {
+    suggestedUsernameDiv = suggestedUsernames();
+  }
+  return (
+    <FormGroup {...props}>
+      {suggestedUsernameDiv}
+    </FormGroup>
+  );
+};
+
+UsernameField.defaultProps = {
+  usernameSuggestions: [],
+  errorMessage: '',
+  autoComplete: null,
+};
+
+UsernameField.propTypes = {
+  usernameSuggestions: PropTypes.arrayOf(string),
+  handleSuggestionClick: PropTypes.func.isRequired,
+  handleUsernameSuggestionClose: PropTypes.func.isRequired,
+  errorMessage: PropTypes.string,
+  intl: PropTypes.objectOf(PropTypes.object).isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  autoComplete: PropTypes.string,
+};
+
+export default injectIntl(UsernameField);