show loading state, p styles

apps/login/src/app/(login)/idp/[provider]/success/page.tsx

@@ -43,14 +43,13 @@ async function loginSuccess(
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>{t("loginSuccess.title")}</h1>
-        <div>
-          {t("loginSuccess.description")}
-          <IdpSignin
-            userId={userId}
-            idpIntent={idpIntent}
-            authRequestId={authRequestId}
-          />
-        </div>
+        <p className="ztdl-p">{t("loginSuccess.description")}</p>
+
+        <IdpSignin
+          userId={userId}
+          idpIntent={idpIntent}
+          authRequestId={authRequestId}
+        />
       </div>
     </DynamicTheme>
   );
@@ -69,14 +68,13 @@ async function linkingSuccess(
     <DynamicTheme branding={branding}>
       <div className="flex flex-col items-center space-y-4">
         <h1>{t("linkingSuccess.title")}</h1>
-        <div>
-          {t("linkingSuccess.description")}
-          <IdpSignin
-            userId={userId}
-            idpIntent={idpIntent}
-            authRequestId={authRequestId}
-          />
-        </div>
+        <p className="ztdl-p">{t("linkingSuccess.description")}</p>
+
+        <IdpSignin
+          userId={userId}
+          idpIntent={idpIntent}
+          authRequestId={authRequestId}
+        />
       </div>
     </DynamicTheme>
   );

apps/login/src/components/idp-signin.tsx

@@ -21,7 +21,7 @@ export function IdpSignin({
   idpIntent: { idpIntentId, idpIntentToken },
   authRequestId,
 }: Props) {
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   const router = useRouter();
@@ -55,8 +55,8 @@ export function IdpSignin({
   }, []);
 
   return (
-    <div className="flex items-center justify-center">
-      {loading && <Spinner />}
+    <div className="flex items-center justify-center py-4">
+      {loading && <Spinner className="h-5 w-5" />}
       {error && (
         <div className="py-4">
           <Alert>{error}</Alert>