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

package/mobile/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -3,19 +3,24 @@ import { Button } from '../../ui-kit/Button/Button';
 
 export interface StepsNavigationButtonsProps {
   step: number;
+  isSending: boolean;
   onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
-  const isFirstStep = step === 0;
-  const isFinalStep = step === 5;
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, isSending, onPrevStep }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
 
-  return (
-    <div className="flex justify-between gap-m">
-      <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
-        Назад
-      </Button>
-      <Button type="submit">{isFinalStep ? 'Отправить заявку' : 'Далее'}</Button>
-    </div>
-  );
-});
+    return (
+      <div className="flex justify-between gap-m">
+        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <Button isLoading={isSending} type="submit">
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </Button>
+      </div>
+    );
+  },
+);

package/mobile/src/components/CreditCardForm/useCreditCardFormAPI.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
@@ -22,7 +23,8 @@ export const useCreditCardFormAPI = ({
   inputs,
   onNextStep,
   onFinish,
-}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void] => {
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const isFinalStep = step === 5;
 
   const retailFormStore = useRetailFormStore();
@@ -61,6 +63,7 @@ export const useCreditCardFormAPI = ({
         return;
       }
 
+      startSending();
       retailFormStore.leadForm = formData;
 
       try {
@@ -84,12 +87,14 @@ export const useCreditCardFormAPI = ({
         }
       } catch (ex) {
         // Do nothing
+      } finally {
+        endSending();
       }
     },
     [isFinalStep, resetForm],
   );
 
-  return [initialState, handleSubmit];
+  return [initialState, handleSubmit, isSending];
 };
 
 const getValue =

package/mobile/src/components/CreditForm/CreditFormStep.tsx

@@ -30,7 +30,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
       [sections],
     );
 
-    const [initialState, onSubmit] = useCreditFormAPI({
+    const [initialState, onSubmit, isSending] = useCreditFormAPI({
       step,
       inputs,
       onNextStep,
@@ -44,7 +44,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
     ) : (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step, params: { calcData } })}
-        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons step={step} isSending={isSending} onPrevStep={onPrevStep} />
       </form>
     );
   },

package/mobile/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -3,19 +3,24 @@ import { Button } from '../../ui-kit/Button/Button';
 
 export interface StepsNavigationButtonsProps {
   step: number;
+  isSending: boolean;
   onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
-  const isFirstStep = step === 0;
-  const isFinalStep = step === 5;
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, onPrevStep, isSending }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
 
-  return (
-    <div className={'flex justify-between gap-m'}>
-      <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
-        Назад
-      </Button>
-      <Button type="submit">{isFinalStep ? 'Отправить заявку' : 'Далее'}</Button>
-    </div>
-  );
-});
+    return (
+      <div className={'flex justify-between gap-m'}>
+        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <Button type="submit" isLoading={isSending}>
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </Button>
+      </div>
+    );
+  },
+);

package/mobile/src/components/CreditForm/useCreditFormAPI.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getCreditFormTaskData } from '../../services/retail/adaptors/getCreditFormTaskData';
@@ -22,7 +23,8 @@ export const useCreditFormAPI = ({
   inputs,
   onNextStep,
   onFinish,
-}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void] => {
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const isFinalStep = step === 5;
 
   const retailFormStore = useRetailFormStore();
@@ -62,6 +64,7 @@ export const useCreditFormAPI = ({
         return;
       }
 
+      startSending();
       retailFormStore.leadForm = formData;
 
       try {
@@ -85,12 +88,14 @@ export const useCreditFormAPI = ({
         }
       } catch (ex) {
         // Do nothing
+      } finally {
+        endSending();
       }
     },
     [isFinalStep, resetForm],
   );
 
-  return [initialState, handleSubmit];
+  return [initialState, handleSubmit, isSending];
 };
 
 const getValue =

package/mobile/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/mobile/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/mobile/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]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.14.714",
+  "version": "0.14.715",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/ApplicationLeadForm/ApplicationLeadForm.tsx

@@ -26,7 +26,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
     );
 
     const [initialFormState, { isLoading }] = useInitApplicationLead(inputs, nextStepLink);
-    const { handleSubmit, responseStatus } = useApplicationLeadApi({
+    const { handleSubmit, responseStatus, isSending } = useApplicationLeadApi({
       inputs,
       programId,
       nextStepLink,
@@ -58,7 +58,7 @@ export const ApplicationLeadForm = JSX<ApplicationLeadFormProps>(
               {renderInputs({ field, inputs: _?.inputs })}
             </div>
           ))}
-          {renderSubmitButton(button)}
+          {renderSubmitButton(button, isSending)}
         </form>
       </ApplicationFormLayout>
     );

package/src/components/ApplicationLeadForm/renderSubmitButton.tsx

@@ -2,8 +2,8 @@ import { Button } from '../../ui-kit/Button/Button';
 import { style } from '../../utils/style';
 import { type SubmitButtonProps } from './ApplicationLeadFormContent';
 
-export const renderSubmitButton = (button?: SubmitButtonProps, className?: string) => (
-  <Button className={style('w-full @xl:w-auto', className)} type="submit">
+export const renderSubmitButton = (button?: SubmitButtonProps, isSending?: boolean) => (
+  <Button className={style('w-full @xl:w-auto')} type="submit" isLoading={isSending}>
     {button?.text ? button.text : 'Отправить заявку'}
   </Button>
 );

package/src/components/ApplicationLeadForm/useApplicationLeadApi.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { createDraftTask } from '../../api/RetailAPI/createDraftTask';
 import { createUserProfile } from '../../api/RetailAPI/createUserProfile';
 import { getLastTaskStatus } from '../../api/RetailAPI/getLastTaskStatus';
@@ -33,6 +34,7 @@ export const useApplicationLeadApi = ({
   nextStepLink,
 }: ApplicationLeadApiProps) => {
   const [responseStatus, setResponseStatus] = useState<'OK' | 'Fail' | ''>('');
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const saveUserData = useSaveUserData();
 
   const openEsiaLoginDialog = useEsiaLoginDialog(nextStepLink);
@@ -47,6 +49,7 @@ export const useApplicationLeadApi = ({
     }
 
     try {
+      startSending();
       const profileId = await createUserProfile({
         profile: { phone: formatPhone(formData.phone as string) },
       });
@@ -64,10 +67,7 @@ export const useApplicationLeadApi = ({
         };
         const handleSuccessVerify = async () => {
           try {
-            const lastTaskId = await getLastTaskStatus({
-              profileId,
-              programId,
-            });
+            const lastTaskId = await getLastTaskStatus({ profileId, programId });
 
             if (lastTaskId) {
               const task = await getTaskById({ taskId: lastTaskId });
@@ -85,15 +85,14 @@ export const useApplicationLeadApi = ({
           }
         };
 
-        const acceptedConsents: string[] = Object.keys(CONSENTS)
-          .filter((_) => formData[_])
-          .map((_) => CONSENTS[_]?.text);
+        const acceptedConsents = getAcceptedConsents(formData);
 
         verifyPhoneDialog.open({
           phone: formData?.phone,
           consents: acceptedConsents,
           onSuccess: handleSuccessVerify,
         });
+        endSending();
       }
     } catch {
       setResponseStatus('Fail');
@@ -103,9 +102,15 @@ export const useApplicationLeadApi = ({
   return {
     handleSubmit,
     responseStatus,
+    isSending,
   };
 };
 
+const getAcceptedConsents = (formData: LeadFormState): string[] =>
+  Object.keys(CONSENTS)
+    .filter((_) => formData[_])
+    .map((_) => CONSENTS[_]?.text);
+
 const updateUserData = async ({
   programId,
   profileId,

package/src/components/CreditCardForm/CreditCardFormStep.tsx

@@ -24,7 +24,7 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
       [sections],
     );
 
-    const [initialState, onSubmit] = useCreditCardFormAPI({
+    const [initialState, onSubmit, isSending] = useCreditCardFormAPI({
       step,
       inputs,
       onNextStep,
@@ -38,7 +38,7 @@ export const CreditCardFormStep = JSX<CreditCardFormStepProps>(
     ) : (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step })}
-        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons isSending={isSending} step={step} onPrevStep={onPrevStep} />
       </form>
     );
   },

package/src/components/CreditCardForm/StepsNavigationButtons.tsx

@@ -3,19 +3,24 @@ import { Button } from '../../ui-kit/Button/Button';
 
 export interface StepsNavigationButtonsProps {
   step: number;
+  isSending: boolean;
   onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
-  const isFirstStep = step === 0;
-  const isFinalStep = step === 5;
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, isSending, onPrevStep }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
 
-  return (
-    <div className="flex justify-between gap-m">
-      <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
-        Назад
-      </Button>
-      <Button type="submit">{isFinalStep ? 'Отправить заявку' : 'Далее'}</Button>
-    </div>
-  );
-});
+    return (
+      <div className="flex justify-between gap-m">
+        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <Button isLoading={isSending} type="submit">
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </Button>
+      </div>
+    );
+  },
+);

package/src/components/CreditCardForm/useCreditCardFormAPI.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getObjectValidator } from '../../ui-kit/FormField/getObjectValidator';
@@ -22,7 +23,8 @@ export const useCreditCardFormAPI = ({
   inputs,
   onNextStep,
   onFinish,
-}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void] => {
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const isFinalStep = step === 5;
 
   const retailFormStore = useRetailFormStore();
@@ -61,6 +63,7 @@ export const useCreditCardFormAPI = ({
         return;
       }
 
+      startSending();
       retailFormStore.leadForm = formData;
 
       try {
@@ -84,12 +87,14 @@ export const useCreditCardFormAPI = ({
         }
       } catch (ex) {
         // Do nothing
+      } finally {
+        endSending();
       }
     },
     [isFinalStep, resetForm],
   );
 
-  return [initialState, handleSubmit];
+  return [initialState, handleSubmit, isSending];
 };
 
 const getValue =

package/src/components/CreditForm/CreditFormStep.tsx

@@ -30,7 +30,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
       [sections],
     );
 
-    const [initialState, onSubmit] = useCreditFormAPI({
+    const [initialState, onSubmit, isSending] = useCreditFormAPI({
       step,
       inputs,
       onNextStep,
@@ -44,7 +44,7 @@ export const CreditFormStep = JSX<CreditFormStepProps>(
     ) : (
       <form onSubmit={handleSubmit} className="space-y-m">
         {renderStep({ sections, field, step, params: { calcData } })}
-        <StepsNavigationButtons step={step} onPrevStep={onPrevStep} />
+        <StepsNavigationButtons step={step} isSending={isSending} onPrevStep={onPrevStep} />
       </form>
     );
   },

package/src/components/CreditForm/StepsNavigationButtons.tsx

@@ -3,19 +3,24 @@ import { Button } from '../../ui-kit/Button/Button';
 
 export interface StepsNavigationButtonsProps {
   step: number;
+  isSending: boolean;
   onPrevStep?: () => void;
 }
 
-export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(({ step, onPrevStep }) => {
-  const isFirstStep = step === 0;
-  const isFinalStep = step === 5;
+export const StepsNavigationButtons = JSX<StepsNavigationButtonsProps>(
+  ({ step, onPrevStep, isSending }) => {
+    const isFirstStep = step === 0;
+    const isFinalStep = step === 5;
 
-  return (
-    <div className={'flex justify-between gap-m'}>
-      <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
-        Назад
-      </Button>
-      <Button type="submit">{isFinalStep ? 'Отправить заявку' : 'Далее'}</Button>
-    </div>
-  );
-});
+    return (
+      <div className={'flex justify-between gap-m'}>
+        <Button onClick={onPrevStep} type="button" version="secondary" disabled={isFirstStep}>
+          Назад
+        </Button>
+        <Button type="submit" isLoading={isSending}>
+          {isFinalStep ? 'Отправить заявку' : 'Далее'}
+        </Button>
+      </div>
+    );
+  },
+);

package/src/components/CreditForm/useCreditFormAPI.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from '@redneckz/uni-jsx/lib/hooks';
+import { useBool } from '@redneckz/uni-jsx/lib/hooks/useBool';
 import { updateUserTask } from '../../api/RetailAPI/updateUserTask';
 import { useRetailFormStore } from '../../hooks/useRetailFormStore';
 import { getCreditFormTaskData } from '../../services/retail/adaptors/getCreditFormTaskData';
@@ -22,7 +23,8 @@ export const useCreditFormAPI = ({
   inputs,
   onNextStep,
   onFinish,
-}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void] => {
+}: CreditFormApiProps): [LeadFormState, (formData: LeadFormState) => void, boolean] => {
+  const [isSending, { setTrue: startSending, setFalse: endSending }] = useBool(false);
   const isFinalStep = step === 5;
 
   const retailFormStore = useRetailFormStore();
@@ -62,6 +64,7 @@ export const useCreditFormAPI = ({
         return;
       }
 
+      startSending();
       retailFormStore.leadForm = formData;
 
       try {
@@ -85,12 +88,14 @@ export const useCreditFormAPI = ({
         }
       } catch (ex) {
         // Do nothing
+      } finally {
+        endSending();
       }
     },
     [isFinalStep, resetForm],
   );
 
-  return [initialState, handleSubmit];
+  return [initialState, handleSubmit, isSending];
 };
 
 const getValue =

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"