feat(threaded-replies): keep replies visible when loading more replies (#3133)

* feat(threaded-replies): keep replies visible when loading more replies

Author: wpiesiak

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import noop from 'lodash/noop';
 
-import LoadingIndicator from '../../../../components/loading-indicator';
 import PlainButton from '../../../../components/plain-button';
 import ActivityThreadReplies from './ActivityThreadReplies';
 import ActivityThreadReplyForm from './ActivityThreadReplyForm';
@@ -113,19 +112,15 @@ const ActivityThread = ({
         <div className="bcs-ActivityThread" data-testid="activity-thread">
             {children}
 
-            {isRepliesLoading && (
-                <div className="bcs-ActivityThread-loading" data-testid="activity-thread-loading">
-                    <LoadingIndicator />
-                </div>
-            )}
             {renderButton()}
 
-            {!isRepliesLoading && repliesTotalCount > 0 && repliesLength > 0 && (
+            {repliesTotalCount > 0 && repliesLength > 0 && (
                 <ActivityThreadReplies
                     currentUser={currentUser}
                     getAvatarUrl={getAvatarUrl}
                     getMentionWithQuery={getMentionWithQuery}
                     getUserProfileUrl={getUserProfileUrl}
+                    isRepliesLoading={isRepliesLoading}
                     mentionSelectorContacts={mentionSelectorContacts}
                     onDelete={onReplyDelete}
                     onEdit={onReplyEdit}

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.scss

@@ -22,7 +22,3 @@
         outline: auto;
     }
 }
-
-.bcs-ActivityThread-loading {
-    padding-bottom: $bdl-grid-unit * 5;
-}

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js

@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import Comment from '../comment';
+import LoadingIndicator from '../../../../components/loading-indicator';
 
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { Translations } from '../../flowTypes';
@@ -14,6 +15,7 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
+    isRepliesLoading?: boolean,
     mentionSelectorContacts?: SelectorItems<>,
     onDelete?: Function,
     onEdit?: Function,
@@ -26,6 +28,7 @@ const ActivityThreadReplies = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    isRepliesLoading,
     mentionSelectorContacts,
     onDelete,
     onEdit,
@@ -43,6 +46,11 @@ const ActivityThreadReplies = ({
 
     return (
         <div className="bcs-ActivityThreadReplies" data-testid="activity-thread-replies">
+            {isRepliesLoading && (
+                <div className="bcs-ActivityThreadReplies-loading" data-testid="activity-thread-replies-loading">
+                    <LoadingIndicator />
+                </div>
+            )}
             {replies.map((reply: CommentType) => (
                 <Comment
                     key={`${reply.type}${reply.id}`}

src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.scss

@@ -15,3 +15,7 @@
         content: '';
     }
 }
+
+.bcs-ActivityThreadReplies-loading {
+    padding-bottom: $bdl-grid-unit * 5;
+}

src/elements/content-sidebar/activity-feed/activity-feed/__tests__/ActivityThread.test.js

@@ -81,12 +81,11 @@ describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThrea
         expect(queryByTestId('activity-thread-replies')).not.toBeInTheDocument();
     });
 
-    test('should render LoadingIndicator and do not render replies or button if repliesLoading is true', () => {
+    test('should render LoadingIndicator and do not render button if repliesLoading is true', () => {
         const { queryByTestId } = getWrapper({ isRepliesLoading: true });
 
-        expect(queryByTestId('activity-thread-replies')).not.toBeInTheDocument();
         expect(queryByTestId('activity-thread-button')).not.toBeInTheDocument();
-        expect(queryByTestId('activity-thread-loading')).toBeInTheDocument();
+        expect(queryByTestId('activity-thread-replies-loading')).toBeInTheDocument();
     });
 
     test('should NOT have reply button when onReplyCreate is not passed', () => {

src/elements/content-sidebar/activity-feed/activity-feed/__tests__/ActivityThreadReplies.test.js

@@ -14,4 +14,16 @@ describe('src/elements/content-sidebar/activity-feed/activity-feed/ActivityThrea
         expect(queryByText(replies[1].message)).toBeVisible();
         expect(queryByText(replies[0].message)).toBeVisible();
     });
+
+    test('should render loading indicator if isRepliesLoading is true', () => {
+        const { queryByTestId } = getWrapper({ isRepliesLoading: true });
+
+        expect(queryByTestId('activity-thread-replies-loading')).toBeInTheDocument();
+    });
+
+    test('should not render loading indicator if isRepliesLoading is false', () => {
+        const { queryByTestId } = getWrapper({ isRepliesLoading: false });
+
+        expect(queryByTestId('activity-thread-replies-loading')).not.toBeInTheDocument();
+    });
 });