fixed 'show more' status while initial comment load

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()}

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