From 60fdced2374e7c5cc6bf39899f8094fdd2a29082 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <f.katurov@rogii.com>
Date: Thu, 15 Dec 2022 11:18:45 +0600
Subject: [PATCH] fixed 'show more' status while initial comment load

---
 src/containers/node/NodeComments/index.tsx | 18 ++++++++++++------
 src/hooks/comments/useGetComments.ts       | 11 ++++++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/containers/node/NodeComments/index.tsx b/src/containers/node/NodeComments/index.tsx
index 27252081..6fbcf1fd 100644
--- a/src/containers/node/NodeComments/index.tsx
+++ b/src/containers/node/NodeComments/index.tsx
@@ -34,15 +34,21 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
   const groupped: ICommentGroup[] = useGrouppedComments(
     comments,
     order,
-    lastSeenCurrent ?? undefined
+    lastSeenCurrent ?? undefined,
   );
 
   const more = useMemo(
     () =>
-      hasMore && <div className={styles.more}>
-        <LoadMoreButton isLoading={isLoadingMore} onClick={onLoadMoreComments} />
-      </div>,
-    [hasMore, onLoadMoreComments, isLoadingMore]
+      hasMore &&
+      !isLoading && (
+        <div className={styles.more}>
+          <LoadMoreButton
+            isLoading={isLoadingMore}
+            onClick={onLoadMoreComments}
+          />
+        </div>
+      ),
+    [hasMore, onLoadMoreComments, isLoadingMore, isLoading],
   );
 
   if (!node?.id) {
@@ -53,7 +59,7 @@ const NodeComments: FC<IProps> = memo(({ order }) => {
     <div className={styles.wrap}>
       {order === 'DESC' && more}
 
-      {groupped.map(group => (
+      {groupped.map((group) => (
         <Comment
           nodeId={node.id!}
           key={group.ids.join()}
diff --git a/src/hooks/comments/useGetComments.ts b/src/hooks/comments/useGetComments.ts
index 29c42afa..9462aa7d 100644
--- a/src/hooks/comments/useGetComments.ts
+++ b/src/hooks/comments/useGetComments.ts
@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
@@ -26,6 +26,8 @@ const extractKey = (key: string) => {
 };
 
 export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
+  const [isInitialLoaded, setIsInitialLoaded] = useState(false);
+
   const { data, isValidating, setSize, size, mutate } = useSWRInfinite(
     getKey(nodeId),
     async (key: string) => {
@@ -39,6 +41,7 @@ export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
     },
     {
       fallbackData: fallbackData && [fallbackData],
+      onSuccess: () => setIsInitialLoaded(true),
     },
   );
 
@@ -52,13 +55,15 @@ export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
     [setSize, size],
   );
 
+  const isLoading = isValidating && !isInitialLoaded;
+
   return {
     comments,
     hasMore,
     onLoadMoreComments,
-    isLoading: !data && isValidating,
+    isLoading,
     mutate,
     data,
-    isLoadingMore: !!data?.length && isValidating,
+    isLoadingMore: !!data?.length && isValidating && isInitialLoaded,
   };
 };