@redneckz/wildless-cms-uni-blocks 0.14.713 → 0.14.715

package/src/ui-kit/Button/Button.tsx

@@ -3,6 +3,7 @@ import { type ButtonVersion } from '../../model/ButtonVersion';
 import { style } from '../../utils/style';
 import { type ARIAProps } from '../ARIAProps';
 import { type ControlStateProps } from '../ControlStateProps';
+import { Loader } from '../Loader/Loader';
 import { type PreventableEvent } from '../PreventableEvent';
 import { useButton } from './useButton';
 
@@ -30,6 +31,7 @@ export interface ButtonProps extends ControlStateProps, ARIAProps {
   version?: ButtonVersion;
   type?: 'button' | 'submit' | 'reset';
   rounded?: boolean;
+  isLoading?: boolean;
   role?: string;
   onClick?: (ev?: PreventableEvent) => void;
 }
@@ -42,6 +44,7 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
     version = 'primary',
     active,
     disabled,
+    isLoading,
     type = 'button',
     rounded = true,
     role,
@@ -52,13 +55,13 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
     <button
       className={style(
         'font-sans px-9 py-4',
-        'flex justify-center items-center gap-xs',
+        'flex justify-center items-center gap-xs relative',
         {
           'text-white bg-primary-active': active,
-          'bg-main-gray text-main-disabled cursor-not-allowed': disabled,
+          'bg-main-gray text-main-disabled cursor-not-allowed': disabled || isLoading,
           'rounded-md': rounded,
         },
-        !active && !disabled
+        !active && !disabled && !isLoading
           ? style(buttonStyleMap[version], secondaryButtonStyleMap[version])
           : '',
         className,
@@ -67,6 +70,7 @@ export const Button = JSX<ButtonProps>(({ children, ...props }) => {
       role={role}
       onClick={onClick}
     >
+      {isLoading ? <Loader blur={true} size="small" /> : null}
       {children}
     </button>
   );

package/src/ui-kit/Loader/Loader.tsx

@@ -6,10 +6,11 @@ interface LoaderProps {
   color?: TextColor;
   position?: 'static' | 'absolute';
   blur?: boolean;
+  size?: 'small' | 'big';
 }
 
 export const Loader = JSX<LoaderProps>(
-  ({ color = 'text-primary-main', position = 'absolute', blur = true }) => (
+  ({ color = 'text-primary-main', position = 'absolute', blur = true, size = 'big' }) => (
     <div
       className={style('flex justify-center items-center h-full w-full z-50', position, {
         'backdrop-blur': blur,
@@ -17,10 +18,11 @@ export const Loader = JSX<LoaderProps>(
     >
       <div
         className={style(
-          'inline-block h-28 w-28',
+          'inline-block ',
           'animate-spin rounded-full',
-          'border-8 border-solid border-current',
+          'border-solid border-current',
           'border-r-transparent',
+          size === 'small' ? 'border-4 h-8 w-8' : 'border-8 h-28 w-28',
           color,
         )}
         role="status"

package/src/ui-kit/VerifyPhoneDialog/useVerifyPhoneDialogSubmit.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { checkCode } from '../../api/RetailAPI/checkCode';
 
 type useVerifyPhoneDialogSubmitProps = {
@@ -11,7 +12,7 @@ export const useVerifyPhoneDialogSubmit = ({
   onSuccess,
 }: useVerifyPhoneDialogSubmitProps) => {
   const [errorText, setErrorText] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoading, { setTrue: startLoading, setFalse: endLoading }] = useBool(false);
   const [timeNextReq, setTimeNextReq] = useState(0);
   const [isTimerStarted, setIsTimerStarted] = useState(false);
   const [attempts, setAttempts] = useState(0);
@@ -26,17 +27,17 @@ export const useVerifyPhoneDialogSubmit = ({
       setIsTimerStarted(false);
       setTimeNextReq(0);
       setAttempts((_) => _ + 1);
-      setIsLoading(true);
+      startLoading();
       await checkCode({
         smsText: values.join(''),
         smsCodesSetName: { key: 'AUTHENTICATION' },
       });
       resetError();
-      onSuccess?.(values.join(''));
+      await onSuccess?.(values.join(''));
     } catch {
       setErrorText(attempts > 1 ? 'Исчерпан лимит ввода смс-кода' : 'Неверный код');
     } finally {
-      setIsLoading(false);
+      endLoading();
     }
   }, [values, attempts]);