fixed comments loader

src/containers/boris/BorisComments/index.tsx

@@ -7,7 +7,7 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { isSSR } from '~/constants/ssr';
 import { NodeComments } from '~/containers/node/NodeComments';
 import { useAuth } from '~/hooks/auth/useAuth';
-import { CommentContextProvider, useCommentContext } from '~/utils/context/CommentContextProvider';
+import { useCommentContext } from '~/utils/context/CommentContextProvider';
 import { useNodeContext } from '~/utils/context/NodeContextProvider';
 import { useUserContext } from '~/utils/context/UserContextProvider';
 
@@ -21,23 +21,10 @@ const BorisComments: FC<IProps> = () => {
     isLoading,
     comments,
     onSaveComment,
-    onLoadMoreComments,
-    onDeleteComment,
-    onShowImageModal,
-    hasMore,
   } = useCommentContext();
   const { node } = useNodeContext();
 
   return (
-    <CommentContextProvider
-      onSaveComment={onSaveComment}
-      comments={comments}
-      hasMore={hasMore}
-      onDeleteComment={onDeleteComment}
-      onLoadMoreComments={onLoadMoreComments}
-      onShowImageModal={onShowImageModal}
-      isLoading={isLoading}
-    >
       <Group>
         {(isUser || isSSR) && (
           <NodeCommentFormSSR user={user} nodeId={node.id} saveComment={onSaveComment} />
@@ -51,7 +38,6 @@ const BorisComments: FC<IProps> = () => {
 
         <Footer />
       </Group>
-    </CommentContextProvider>
   );
 };
 

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;
 }