From 0b449ae2850b39ecd4b58067bc62823d70903bb3 Mon Sep 17 00:00:00 2001
From: lunyachek <ananasgo@gmail.com>
Date: Tue, 14 Feb 2023 00:52:30 +0200
Subject: [PATCH] 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           |  3 ++-
 src/register/RegistrationPage.jsx |  3 ++-
 src/register/UsernameField.jsx    |  2 +-
 src/sass/_style.scss              | 16 +++++++++++++++-
 4 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/login/LoginPage.jsx b/src/login/LoginPage.jsx
index 7ebd4989..53b83267 100644
--- a/src/login/LoginPage.jsx
+++ b/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} />
         ) : (
           <>
diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx
index ac5874a0..635259de 100644
--- a/src/register/RegistrationPage.jsx
+++ b/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} />
         ) : (
           <>
diff --git a/src/register/UsernameField.jsx b/src/register/UsernameField.jsx
index e0e0b258..35b7d97c 100644
--- a/src/register/UsernameField.jsx
+++ b/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 = () => (
diff --git a/src/sass/_style.scss b/src/sass/_style.scss
index c272fe1a..20393557 100644
--- a/src/sass/_style.scss
+++ b/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 {