Fix TPA skeleton loader (#1189)

* feat: update TPA skeleton
* fix: Prevent wrong appearance of skeleton after second tab click

---------

Co-authored-by: Stanislav Lunyachek <[email protected]>

Author: zainab-amir

src/common-components/ThirdPartyAuth.jsx

@@ -6,6 +6,7 @@ import {
   Hyperlink, Icon,
 } from '@openedx/paragon';
 import { Institution } from '@openedx/paragon/icons';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import Skeleton from 'react-loading-skeleton';
 
@@ -47,14 +48,23 @@ const ThirdPartyAuth = (props) => {
         </div>
       )}
       {(isLoginPage && !isEnterpriseLoginDisabled && isSocialAuthActive) && (
-        <Hyperlink className="btn btn-link btn-sm text-body p-0 mb-4" destination={enterpriseLoginURL}>
+        <Hyperlink
+          className={classNames(
+            'btn btn-link btn-sm text-body p-0',
+            { 'mb-0': thirdPartyAuthApiStatus === PENDING_STATE },
+            { 'mb-4': thirdPartyAuthApiStatus !== PENDING_STATE },
+          )}
+          destination={enterpriseLoginURL}
+        >
           <Icon src={Institution} className="institute-icon" />
           {formatMessage(messages['enterprise.login.btn.text'])}
         </Hyperlink>
       )}
 
       {thirdPartyAuthApiStatus === PENDING_STATE ? (
-        <Skeleton className="tpa-skeleton" height={36} count={2} />
+        <div className="mt-4">
+          <Skeleton className="tpa-skeleton" height={36} count={2} />
+        </div>
       ) : (
         <>
           {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && (

src/logistration/Logistration.jsx

@@ -70,7 +70,10 @@ const Logistration = (props) => {
     setInstitutionLogin(!institutionLogin);
   };
 
-  const handleOnSelect = (tabKey) => {
+  const handleOnSelect = (tabKey, currentTab) => {
+    if (tabKey === currentTab) {
+      return;
+    }
     sendTrackEvent(`edx.bi.${tabKey.replace('/', '')}_form.toggled`, { category: 'user-engagement' });
     props.clearThirdPartyAuthContextErrorMessage();
     if (tabKey === LOGIN_PAGE) {
@@ -122,7 +125,7 @@ const Logistration = (props) => {
       );
     }
     return (
-      <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={handleOnSelect}>
+      <Tabs defaultActiveKey={selectedPage} id="controlled-tab" onSelect={(tabKey) => handleOnSelect(tabKey, selectedPage)}>
         <Tab title={formatMessage(messages['logistration.register'])} eventKey={REGISTER_PAGE} />
         <Tab title={formatMessage(messages['logistration.sign.in'])} eventKey={LOGIN_PAGE} />
       </Tabs>

src/logistration/Logistration.test.jsx

@@ -98,6 +98,14 @@ describe('Logistration', () => {
     });
   });
 
+  it('should do nothing when user clicks on the same tab (login/register) again', () => {
+    const { container } = render(reduxWrapper(<IntlLogistration />));
+    // While staying on the registration form, clicking the register tab again
+    fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
+
+    expect(sendTrackEvent).not.toHaveBeenCalledWith('edx.bi.register_form.toggled', { category: 'user-engagement' });
+  });
+
   it('should render registration page', () => {
     mergeConfig({
       ALLOW_PUBLIC_ACCOUNT_CREATION: true,
@@ -264,9 +272,11 @@ describe('Logistration', () => {
     fireEvent.click(container.querySelector('a[data-rb-event-key="/login"]'));
     expect(store.dispatch).toHaveBeenCalledWith(backupRegistrationForm());
   });
+
   it('should fire action to backup login form on tab click', () => {
     store.dispatch = jest.fn(store.dispatch);
-    const { container } = render(reduxWrapper(<IntlLogistration />));
+    const props = { selectedPage: LOGIN_PAGE };
+    const { container } = render(reduxWrapper(<IntlLogistration {...props} />));
     fireEvent.click(container.querySelector('a[data-rb-event-key="/register"]'));
     expect(store.dispatch).toHaveBeenCalledWith(backupLoginForm());
   });