Hide old transitions also when fetching messages

This ensures that the transitions don't flash when older messages are
being fetched.

src/components/ActivityFeed/ActivityFeed.example.js

@@ -18,6 +18,7 @@ export const Empty = {
     messages: [],
     hasOlderMessages: false,
     onShowOlderMessages: noop,
+    fetchMessagesInProgress: false,
   },
   group: 'messages',
 };
@@ -31,6 +32,7 @@ export const WithoutCurrentUser = {
     ],
     hasOlderMessages: false,
     onShowOlderMessages: noop,
+    fetchMessagesInProgress: false,
   },
   group: 'messages',
 };
@@ -48,6 +50,7 @@ export const WithCurrentUser = {
     ],
     hasOlderMessages: false,
     onShowOlderMessages: noop,
+    fetchMessagesInProgress: false,
   },
   group: 'messages',
 };
@@ -76,6 +79,7 @@ export const WithTransitions = {
     messages: [],
     hasOlderMessages: false,
     onShowOlderMessages: noop,
+    fetchMessagesInProgress: false,
   },
   group: 'messages',
 };
@@ -135,6 +139,7 @@ export const WithMessagesAndTransitions = {
     ],
     hasOlderMessages: false,
     onShowOlderMessages: noop,
+    fetchMessagesInProgress: false,
   },
   group: 'messages',
 };
@@ -208,6 +213,7 @@ class PagedFeed extends Component {
       messages,
       hasOlderMessages: !this.state.showAllMessages,
       onShowOlderMessages: handleShowOlder,
+      fetchMessagesInProgress: false,
     };
     return <ActivityFeed {...feedProps} />;
   }

src/components/ActivityFeed/ActivityFeed.js

@@ -142,9 +142,9 @@ const compareItems = (a, b) => {
   return itemDate(a) - itemDate(b);
 };
 
-const organizedItems = (messages, transitions, hasOlderMessages) => {
+const organizedItems = (messages, transitions, hideOldTransitions) => {
   const items = messages.concat(transitions).sort(compareItems);
-  if (hasOlderMessages) {
+  if (hideOldTransitions) {
     // Hide transitions that happened before the oldest message. Since
     // we have older items (messages) that we are not showing, seeing
     // old transitions would be confusing.
@@ -163,6 +163,7 @@ export const ActivityFeedComponent = props => {
     currentUser,
     hasOlderMessages,
     onShowOlderMessages,
+    fetchMessagesInProgress,
     intl,
   } = props;
   const classes = classNames(rootClassName || css.root, className);
@@ -183,7 +184,7 @@ export const ActivityFeedComponent = props => {
   );
 
   // combine messages and transaction transitions
-  const items = organizedItems(messages, transitions, hasOlderMessages);
+  const items = organizedItems(messages, transitions, hasOlderMessages || fetchMessagesInProgress);
 
   const transitionComponent = transition => {
     if (transitionsAvailable) {
@@ -265,6 +266,7 @@ ActivityFeedComponent.propTypes = {
   messages: arrayOf(propTypes.message),
   hasOlderMessages: bool.isRequired,
   onShowOlderMessages: func.isRequired,
+  fetchMessagesInProgress: bool.isRequired,
 
   // from injectIntl
   intl: intlShape.isRequired,

src/components/ActivityFeed/ActivityFeed.test.js

@@ -22,6 +22,7 @@ describe('ActivityFeed', () => {
       ],
       hasOlderMessages: false,
       onShowOlderMessages: noop,
+      fetchMessagesInProgress: false,
       intl: fakeIntl,
     };
     const tree = renderDeep(<ActivityFeedComponent {...props} />);