Added logic for loading animation to appear when posts have yet to be loaded. Added markup necessary for loading animation css. Removed a file that was no longer needed for the design.

2 files changed, 15 insertions, 5 deletions

diff --git a/web/react/components/loading_posts.jsx b/web/react/components/loading_posts.jsx
deleted file mode 100644
index f6d859954..000000000
--- a/web/react/components/loading_posts.jsx
+++ /dev/null
@@ -1,3 +0,0 @@
-// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
-// See License.txt for license information.
-
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index ad8cfa20f..a860804cc 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -295,7 +295,7 @@ module.exports = React.createClass({
     },
     render: function() {
         var order = [];
-        var posts = {};
+        var posts;
 
         var last_viewed = Number.MAX_VALUE;
 
@@ -408,7 +408,7 @@ module.exports = React.createClass({
         }
 
         var postCtls = [];
-        var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date();
+        var previousPostDay = posts && posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date();
         var currentPostDay = new Date();
 
         for (var i = order.length-1; i >= 0; i--) {
@@ -459,6 +459,19 @@ module.exports = React.createClass({
             previousPostDay = utils.getDateForUnixTicks(post.create_at);
         }
 
+        if (posts == undefined) {
+            postCtls.push(
+                <div ref="loadingscreen" className="loading-screen">
+                    <div className="loading__content">
+                    <h3>Loading</h3>
+                        <div id="round_1" className="round"></div>
+                        <div id="round_2" className="round"></div>
+                        <div id="round_3" className="round"></div>
+                    </div>
+                </div>
+            );
+        }
+
         return (
             <div ref="postlist" className="post-list-holder-by-time">
                 <div className="post-list__table">