fix(experience): replace global loading layer (#7348)

replace the global loading layer in the direct sign-in landing page

Author: simeng-li

packages/experience/src/components/LoadingLayer/index.tsx

@@ -5,11 +5,15 @@ import styles from './index.module.scss';
 
 export { default as LoadingIcon } from './LoadingIcon';
 
+export const LoadingIconWithContainer = () => (
+  <div className={styles.container}>
+    <LoadingIcon />
+  </div>
+);
+
 const LoadingLayer = () => (
   <LoadingMask>
-    <div className={styles.container}>
-      <LoadingIcon />
-    </div>
+    <LoadingIconWithContainer />
   </LoadingMask>
 );
 

packages/experience/src/pages/DirectSignIn/index.module.scss

@@ -0,0 +1,7 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  position: fixed;
+  inset: 0;
+  @include _.flex-column;
+}

packages/experience/src/pages/DirectSignIn/index.tsx

@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
-import LoadingLayer from '@/components/LoadingLayer';
+import { LoadingIconWithContainer } from '@/components/LoadingLayer';
 import useSocial from '@/containers/SocialSignInList/use-social';
 import useFallbackRoute from '@/hooks/use-fallback-route';
 import { useSieMethods } from '@/hooks/use-sie';
 import useSingleSignOn from '@/hooks/use-single-sign-on';
 
+import styles from './index.module.scss';
+
 const DirectSignIn = () => {
   const { method, target } = useParams();
   const { socialConnectors, ssoConnectors } = useSieMethods();
@@ -35,6 +37,10 @@ const DirectSignIn = () => {
     window.location.replace('/' + fallback);
   }, [fallback, invokeSocialSignIn, invokeSso, method, socialConnectors, ssoConnectors, target]);
 
-  return <LoadingLayer />;
+  return (
+    <div className={styles.container}>
+      <LoadingIconWithContainer />
+    </div>
+  );
 };
 export default DirectSignIn;