fix(SEBankIDSameDeviceButton): Handle disabled state, use spinner component

Author: janmeier

src/components/SEBankIDSameDeviceButton.tsx

@@ -8,6 +8,9 @@ import ForegroundStrategy from './SEBankIDSameDeviceButton/Foreground';
 import ReloadStrategy from './SEBankIDSameDeviceButton/Reload';
 
 import { autoHydratedState, type Links } from './SEBankIDSameDeviceButton/shared';
+import { AuthButtonGroupContext } from './AuthButtonGroup';
+import classNames from 'classnames';
+import { Spinner } from './Spinner/Spinner';
 
 interface Props {
   className: string;
@@ -78,6 +81,8 @@ async function fetchComplete(completeUrl: string) {
 }
 export default function SEBankIDSameDeviceButton(props: Props) {
   const { loginHint } = useContext(CriiptoVerifyContext);
+  const group = useContext(AuthButtonGroupContext);
+
   const rawUserAgent = typeof navigator !== 'undefined' ? navigator.userAgent : props.userAgent;
   const strategy = useMemo(
     () => determineStrategy(rawUserAgent, loginHint),
@@ -100,6 +105,8 @@ export default function SEBankIDSameDeviceButton(props: Props) {
   } = useContext(CriiptoVerifyContext);
   const redirectUri = props.redirectUri || defaultRedirectURi;
 
+  const disabled = group.disabled || initiated;
+
   const reset = () => {
     setPKCE(undefined);
     setLinks(null);
@@ -211,12 +218,14 @@ export default function SEBankIDSameDeviceButton(props: Props) {
 
   // Track when the button is clicked to stop refreshing URL
   const handleInitiate = () => {
+    group.setDisabled(true);
     handleLog('Initiated');
     setInitiated(true);
     setError(null);
   };
 
   const handleError = async (error: string) => {
+    group.setDisabled(false);
     setInitiated(false);
     setError(error);
 
@@ -236,13 +245,13 @@ export default function SEBankIDSameDeviceButton(props: Props) {
 
   const element = href ? (
     <a
-      className={`${props.className} ${initiated ? 'criipto-eid-btn--disabled' : ''}`}
+      className={classNames(props.className, { 'criipto-eid-btn--disabled': disabled })}
       href={href}
       onClick={handleInitiate}
     >
       {initiated ? (
         <div className="criipto-eid-logo">
-          <div className="criipto-eid-loader"></div>
+          <Spinner />
         </div>
       ) : (
         props.logo