added loading circle for creating comment

src/components/comment/CommentForm/index.tsx

@@ -92,8 +92,6 @@ const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCanc
               <Filler />
 
               <div className={styles.button_column}>
-                {isLoading && <LoaderCircle size={20} />}
-
                 {isEditing && (
                   <Button size="small" color="link" type="button" onClick={onCancelEdit}>
                     Отмена
@@ -106,6 +104,7 @@ const CommentForm: FC<IProps> = observer(({ comment, nodeId, saveComment, onCanc
                   color="gray"
                   iconRight={!isEditing ? 'enter' : 'check'}
                   disabled={isLoading}
+                  loading={isLoading}
                 >
                   {!isEditing ? 'Сказать' : 'Сохранить'}
                 </Button>

src/components/input/Button/index.tsx

@@ -68,15 +68,25 @@ const Button: FC<IButtonProps> = memo(
       ]
     );
 
+    const loaderSize = useMemo(() => {
+      if (['small', 'micro', 'mini'].includes(size)) {
+        return 16;
+      }
+
+      return 24;
+    }, []);
+
     return (
       <Tippy content={label || ''} disabled={!label}>
         <button className={computedClassName} {...props}>
           {iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
           {!!title ? <span>{title}</span> : children}
           {iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
-          {
+          {loading && (
-            loading && <div className={styles.loading}><LoaderCircle /></div>
+            <div className={styles.loading}>
-          }
+              <LoaderCircle size={loaderSize} />
+            </div>
+          )}
         </button>
       </Tippy>
     );

src/components/input/Button/styles.module.scss

@@ -48,7 +48,7 @@
     opacity: 0;
   }
 
-  svg {
+  svg.icon {
     fill: white;
     stroke: white;
   }
@@ -174,7 +174,7 @@
 .small {
   height: 32px;
 
-  svg {
+  svg.icon {
     width: 24px;
     height: 24px;
   }

src/components/input/LoaderCircle/index.tsx

@@ -12,8 +12,8 @@ interface IProps extends SVGProps {
   className?: string;
 }
 
-export const LoaderCircle: FC<IProps> = ({ size = 24, ...rest }) => (
+export const LoaderCircle: FC<IProps> = ({ size = 24, className }) => (
-  <div className={classNames(styles.wrap, 'loader-circle', rest.className)}>
+  <div className={classNames(styles.wrap, 'loader-circle', className)}>
-    <LoaderCircleInner {...rest} size={size} />
+    <LoaderCircleInner size={size} />
   </div>
 );

src/components/input/LoaderCircle/styles.module.scss

@@ -21,6 +21,9 @@
 }
 
 .wrap {
-  //animation: spin infinite 1s linear;
+  animation: spin infinite 0.75s linear;
   display: inline-flex;
+  transform-origin: 50% 50%;
+  align-items: center;
+  justify-content: center;
 }

src/components/input/LoaderCircleInner/styles.module.scss

@@ -1,16 +1,6 @@
 @import "src/styles/variables";
 
-@keyframes spin {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .icon {
   fill: currentColor;
   stroke: none;
-  animation: spin 0.75s infinite linear;
 }