fixed comments loader

src/components/input/Button/index.tsx

@@ -4,18 +4,17 @@ import Tippy from '@tippyjs/react';
 import classnames from 'classnames';
 
 import { Icon } from '~/components/input/Icon';
+import { LoaderCircle } from '~/components/input/LoaderCircle';
 import { IIcon } from '~/types';
 
 import styles from './styles.module.scss';
 
-import 'tippy.js/dist/tippy.css';
-
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab' | 'outline-white' | 'flat';
   iconLeft?: IIcon;
   iconRight?: IIcon;
   title?: string;
@@ -23,6 +22,7 @@ type IButtonProps = DetailedHTMLProps<
   iconOnly?: boolean;
   label?: string;
   round?: boolean;
+  loading?: boolean;
 };
 
 const Button: FC<IButtonProps> = memo(
@@ -40,6 +40,7 @@ const Button: FC<IButtonProps> = memo(
     label,
     ref,
     round,
+    loading,
     ...props
   }) => {
     const computedClassName = useMemo(
@@ -73,6 +74,9 @@ const Button: FC<IButtonProps> = memo(
           {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 && <div className={styles.loading}><LoaderCircle /></div>
+          }
         </button>
       </Tippy>
     );

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

@@ -76,6 +76,7 @@
 
   &:global(.stretchy) {
     flex: 1;
+    width: 100%;
   }
 
   &:global(.disabled),
@@ -243,3 +244,21 @@
 .lab {
   background: $blue;
 }
+
+.flat {
+  box-shadow: none;
+  background: $comment_bg;
+  color: darken(white, 20%);
+}
+
+.loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparentize($content_bg, 0.1);
+}

src/components/input/LoadMoreButton/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import { Button } from '~/components/input/Button';
+
+import styles from './styles.module.scss';
+
+interface LoadMoreButtonProps {
+  isLoading: boolean;
+  onClick?: () => void;
+}
+
+const LoadMoreButton: FC<LoadMoreButtonProps> = ({ isLoading, onClick }) => (
+  <Button color="flat" onClick={onClick} stretchy className={styles.more} loading={isLoading}>
+    Показать ещё комментарии
+  </Button>
+);
+
+export { LoadMoreButton }

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

@@ -0,0 +1,5 @@
+@import "src/styles/variables";
+
+.more {
+  width: 100%;
+}

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

@@ -12,25 +12,5 @@
 .icon {
   fill: currentColor;
   stroke: none;
-}
-
-.e0 {
-  animation: spin infinite linear 2s;
-  transform-origin: 50% 50%;
-  opacity: 0.1;
-}
-
-.e1 {
-  animation: spin infinite reverse 2s -0.25s;
-  transform-origin: 50% 50%;
-  opacity: 0.1;
-}
-.e2 {
-  animation: spin infinite linear 2s -0.25s;
-  transform-origin: 50% 50%;
-  opacity: 0.1;
-}
-
-.e {
-  opacity: 0.1;
+  animation: spin 0.75s infinite linear;
 }