Show a tile at beginning of visible history (#5887)

src/components/structures/MessagePanel.tsx

@@ -35,6 +35,7 @@ import { hasText } from "../../TextForEvent";
 import IRCTimelineProfileResizer from "../views/elements/IRCTimelineProfileResizer";
 import DMRoomMap from "../../utils/DMRoomMap";
 import NewRoomIntro from "../views/rooms/NewRoomIntro";
+import HistoryTile from "../views/rooms/HistoryTile";
 import { replaceableComponent } from "../../utils/replaceableComponent";
 import defaultDispatcher from '../../dispatcher/dispatcher';
 import CallEventGrouper from "./CallEventGrouper";
@@ -129,8 +130,8 @@ interface IProps {
     // for pending messages.
     ourUserId?: string;
 
-    // true to suppress the date at the start of the timeline
-    suppressFirstDateSeparator?: boolean;
+    // whether the timeline can visually go back any further
+    canBackPaginate?: boolean;
 
     // whether to show read receipts
     showReadReceipts?: boolean;
@@ -823,7 +824,7 @@ export default class MessagePanel extends React.Component<IProps, IState> {
         if (prevEvent == null) {
             // first event in the panel: depends if we could back-paginate from
             // here.
-            return !this.props.suppressFirstDateSeparator;
+            return !this.props.canBackPaginate;
         }
         return wantsDateSeparator(prevEvent.getDate(), nextEventDate);
     }
@@ -1365,6 +1366,12 @@ class MemberGrouper extends BaseGrouper {
             eventTiles = null;
         }
 
+        // If a membership event is the start of visible history, tell the user
+        // why they can't see earlier messages
+        if (!this.panel.props.canBackPaginate && !this.prevEvent) {
+            ret.push(<HistoryTile key="historytile" />);
+        }
+
         ret.push(
             <MemberEventListSummary
                 key={key}