From 572b678bd0284be42ccb0ff208b7a82ae40e920f Mon Sep 17 00:00:00 2001
From: Zainab Amir <zainab.amir@arbisoft.com>
Date: Tue, 5 Mar 2024 11:53:50 +0500
Subject: [PATCH] feat: update TPA skeleton

---
 src/common-components/ThirdPartyAuth.jsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/common-components/ThirdPartyAuth.jsx b/src/common-components/ThirdPartyAuth.jsx
index bdffc55cf3..dfe1a48297 100644
--- a/src/common-components/ThirdPartyAuth.jsx
+++ b/src/common-components/ThirdPartyAuth.jsx
@@ -18,6 +18,7 @@ import {
   RenderInstitutionButton,
   SocialAuthProviders,
 } from './index';
+import classNames from "classnames";
 
 /**
  * This component renders the Single sign-on (SSO) buttons for the providers passed.
@@ -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} />
+      {thirdPartyAuthApiStatus === PENDING_STATE || true ? (
+        <div className="mt-4">
+          <Skeleton className="tpa-skeleton" height={36} count={2} />
+        </div>
       ) : (
         <>
           {(isEnterpriseLoginDisabled && isInstitutionAuthActive) && (