diff --git a/packages/experience/src/pages/SocialSignInWebCallback/SingleSignOn.tsx b/packages/experience/src/pages/SocialSignInWebCallback/SingleSignOn.tsx
index 4215ca4df..c64b84543 100644
--- a/packages/experience/src/pages/SocialSignInWebCallback/SingleSignOn.tsx
+++ b/packages/experience/src/pages/SocialSignInWebCallback/SingleSignOn.tsx
@@ -17,9 +17,9 @@ const SingleSignOn = ({ connectorId }: Props) => {
   */
   useNativeMessageListener(socialConnectors.length > 0);
 
-  useSingleSignOnListener(connectorId);
+  const { loading } = useSingleSignOnListener(connectorId);
 
-  return <LoadingLayer />;
+  return loading ? <LoadingLayer /> : null;
 };
 
 export default SingleSignOn;
diff --git a/packages/experience/src/pages/SocialSignInWebCallback/SocialSignIn.tsx b/packages/experience/src/pages/SocialSignInWebCallback/SocialSignIn.tsx
index 73c7c2f15..cdc19cb29 100644
--- a/packages/experience/src/pages/SocialSignInWebCallback/SocialSignIn.tsx
+++ b/packages/experience/src/pages/SocialSignInWebCallback/SocialSignIn.tsx
@@ -10,9 +10,9 @@ type Props = {
 };
 
 const SocialSignIn = ({ connectorId }: Props) => {
-  useSocialSignInListener(connectorId);
+  const { loading } = useSocialSignInListener(connectorId);
 
-  return <LoadingLayer />;
+  return loading ? <LoadingLayer /> : null;
 };
 
 export default SocialSignIn;
diff --git a/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts b/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts
index 045b21096..1e35b785c 100644
--- a/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts
+++ b/packages/experience/src/pages/SocialSignInWebCallback/use-single-sign-on-listener.ts
@@ -1,5 +1,5 @@
 import { SignInMode } from '@logto/schemas';
-import { useState, useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router-dom';
 
@@ -52,6 +52,7 @@ const useSingleSignOnRegister = () => {
 const useSingleSignOnListener = (connectorId: string) => {
   const { t } = useTranslation();
 
+  const [loading, setLoading] = useState(true);
   const [isConsumed, setIsConsumed] = useState(false);
   const [searchParameters, setSearchParameters] = useSearchParams();
   const { setToast } = useToast();
@@ -71,6 +72,7 @@ const useSingleSignOnListener = (connectorId: string) => {
       });
 
       if (error) {
+        setLoading(false);
         await handleError(error, {
           'user.identity_not_exist': async (error) => {
             // Should not let user register new social account under sign-in only mode
@@ -128,6 +130,8 @@ const useSingleSignOnListener = (connectorId: string) => {
     singleSignOnHandler,
     t,
   ]);
+
+  return { loading };
 };
 
 export default useSingleSignOnListener;
diff --git a/packages/experience/src/pages/SocialSignInWebCallback/use-social-sign-in-listener.ts b/packages/experience/src/pages/SocialSignInWebCallback/use-social-sign-in-listener.ts
index d93dc51a0..e9ca9378b 100644
--- a/packages/experience/src/pages/SocialSignInWebCallback/use-social-sign-in-listener.ts
+++ b/packages/experience/src/pages/SocialSignInWebCallback/use-social-sign-in-listener.ts
@@ -1,14 +1,14 @@
 import type { RequestErrorBody } from '@logto/schemas';
 import { SignInMode } from '@logto/schemas';
-import { useEffect, useCallback, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { validate } from 'superstruct';
 
 import { signInWithSocial } from '@/apis/interaction';
 import useApi from '@/hooks/use-api';
-import useErrorHandler from '@/hooks/use-error-handler';
 import type { ErrorHandlers } from '@/hooks/use-error-handler';
+import useErrorHandler from '@/hooks/use-error-handler';
 import usePreSignInErrorHandler from '@/hooks/use-pre-sign-in-error-handler';
 import { useSieMethods } from '@/hooks/use-sie';
 import useSocialRegister from '@/hooks/use-social-register';
@@ -19,6 +19,7 @@ import { parseQueryParameters } from '@/utils';
 import { stateValidation } from '@/utils/social-connectors';
 
 const useSocialSignInListener = (connectorId: string) => {
+  const [loading, setLoading] = useState(true);
   const { setToast } = useToast();
   const { signInMode } = useSieMethods();
   const { t } = useTranslation();
@@ -90,6 +91,7 @@ const useSocialSignInListener = (connectorId: string) => {
       });
 
       if (error) {
+        setLoading(false);
         await handleError(error, signInWithSocialErrorHandlers);
 
         return;
@@ -130,6 +132,8 @@ const useSocialSignInListener = (connectorId: string) => {
     signInWithSocialHandler,
     t,
   ]);
+
+  return { loading };
 };
 
 export default useSocialSignInListener;