fixed comments loader

src/containers/node/NodeComments/index.tsx

@@ -1,6 +1,7 @@
 import React, { FC, memo, useMemo } from 'react';
 
 import { Comment } from '~/components/comment/Comment';
+import { LoadMoreButton } from '~/components/input/LoadMoreButton';
 import { useGrouppedComments } from '~/hooks/node/useGrouppedComments';
 import { ICommentGroup } from '~/types';
 import { useCommentContext } from '~/utils/context/CommentContextProvider';
@@ -21,6 +22,8 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
   const {
     comments,
     hasMore,
+    isLoading,
+    isLoadingMore,
     lastSeenCurrent,
     onLoadMoreComments,
     onDeleteComment,
@@ -36,12 +39,10 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
 
   const more = useMemo(
     () =>
-      hasMore && (
-        <div className={styles.more} onClick={onLoadMoreComments}>
-          Показать ещё комментарии
-        </div>
-      ),
-    [hasMore, onLoadMoreComments]
+      hasMore && <div className={styles.more}>
+        <LoadMoreButton isLoading={isLoadingMore} onClick={onLoadMoreComments} />
+      </div>,
+    [hasMore, onLoadMoreComments, isLoadingMore]
   );
 
   if (!node?.id) {

src/containers/node/NodeComments/styles.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/variables";
+@import "src/styles/variables";
 
 .wrap {
   & > div {
@@ -11,40 +11,5 @@
 }
 
 .more {
-  padding: $gap;
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: $radius;
-  text-transform: uppercase;
-  color: darken(white, 60%);
-  font: $font_14_medium;
-  cursor: pointer;
-  transition: all 0.25s;
-  user-select: none;
-  background: url('../../../sprites/stripes.svg');
-  position: relative;
-
-  &:hover {
-    color: $wisegreen;
-    background-color: darken($wisegreen, 12%);
-
-    .bar {
-      background: $wisegreen;
-    }
-  }
-}
-
-.bar {
-  position: absolute;
-  height: 2px;
-  border-radius: 2px;
-  background: darken(white, 60%);
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0);
-  width: 50%;
-  transition: width 0.25s;
+  margin-bottom: $gap;
 }