From 08ad69847cda84ac4d8144d0b05ce4eb523e3ed6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 2 Feb 2017 16:32:10 +0000
Subject: [PATCH] show placeholder of timeline empty

---
 src/components/structures/FilePanel.js         |  1 +
 src/components/structures/NotificationPanel.js |  1 +
 src/components/structures/TimelinePanel.js     | 11 +++++++++++
 3 files changed, 13 insertions(+)

diff --git a/src/components/structures/FilePanel.js b/src/components/structures/FilePanel.js
index 5166619d48..fc4cbd9423 100644
--- a/src/components/structures/FilePanel.js
+++ b/src/components/structures/FilePanel.js
@@ -105,6 +105,7 @@ var FilePanel = React.createClass({
                     showUrlPreview = { false }
                     tileShape="file_grid"
                     opacity={ this.props.opacity }
+                    empty="There are no visible files in this room"
                 />
             );
         }
diff --git a/src/components/structures/NotificationPanel.js b/src/components/structures/NotificationPanel.js
index 7d9e752657..16f9723c76 100644
--- a/src/components/structures/NotificationPanel.js
+++ b/src/components/structures/NotificationPanel.js
@@ -48,6 +48,7 @@ var NotificationPanel = React.createClass({
                     showUrlPreview = { false }
                     opacity={ this.props.opacity }
                     tileShape="notif"
+                    empty="You have no visible notifications"
                 />
             );
         }
diff --git a/src/components/structures/TimelinePanel.js b/src/components/structures/TimelinePanel.js
index 490b83f2bf..5c0a6159e5 100644
--- a/src/components/structures/TimelinePanel.js
+++ b/src/components/structures/TimelinePanel.js
@@ -96,6 +96,9 @@ var TimelinePanel = React.createClass({
 
         // shape property to be passed to EventTiles
         tileShape: React.PropTypes.string,
+
+        // placeholder text to use if the timeline is empty
+        empty: React.PropTypes.string,
     },
 
     statics: {
@@ -990,6 +993,14 @@ var TimelinePanel = React.createClass({
             );
         }
 
+        if (this.state.events.length == 0) {
+            return (
+                    <div className={ this.props.className + " mx_RoomView_messageListWrapper" }>
+                        <div className="mx_RoomView_empty">{ this.props.empty }</div>
+                    </div>
+            );
+        }
+
         // give the messagepanel a stickybottom if we're at the end of the
         // live timeline, so that the arrival of new events triggers a
         // scroll.