Merge pull request #126 from rgarmsen2295/mm-1210

MM-1210 Added loading animation that is used while posts in a channel load

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,55 +408,70 @@ 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 currentPostDay = new Date();
 
-        for (var i = order.length-1; i >= 0; i--) {
+        if (posts != undefined) {
-            var post = posts[order[i]];
+            var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date();
-            var parentPost;
+            var currentPostDay = new Date();
 
-            if (post.parent_id) {
+            for (var i = order.length-1; i >= 0; i--) {
-                parentPost = posts[post.parent_id];
+                var post = posts[order[i]];
-            } else {
+                var parentPost;
-                parentPost = null;
+
+                if (post.parent_id) {
+                    parentPost = posts[post.parent_id];
+                } else {
+                    parentPost = null;
+                }
+
+                var sameUser = i < order.length-1 && posts[order[i+1]].user_id === post.user_id  && post.create_at - posts[order[i+1]].create_at <= 1000*60*5 ? "same--user" : "";
+                var sameRoot = i < order.length-1 && post.root_id != "" && (posts[order[i+1]].id === post.root_id || posts[order[i+1]].root_id === post.root_id) ? true : false;
+
+                // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
+                var hideProfilePic = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && posts[order[i+1]].root_id === '' && post.root_id === '';
+
+                // check if it's the last comment in a consecutive string of comments on the same post
+                var isLastComment = false;
+                if (utils.isComment(post)) {
+                    // it is the last comment if it is last post in the channel or the next post has a different root post
+                    isLastComment = (i === 0 || posts[order[i-1]].root_id != post.root_id);
+                }
+
+                var postCtl = <Post sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} posts={posts} hideProfilePic={hideProfilePic} isLastComment={isLastComment} />;
+
+                currentPostDay = utils.getDateForUnixTicks(post.create_at);
+                if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) {
+                    postCtls.push(
+                        <div className="date-separator">
+                            <hr className="separator__hr" />
+                            <div className="separator__text">{currentPostDay.toDateString()}</div>
+                        </div>
+                    );
+                }
+
+                if (post.create_at > last_viewed && !rendered_last_viewed) {
+                    rendered_last_viewed = true;
+                    postCtls.push(
+                        <div className="new-separator">
+                            <hr id="new_message" className="separator__hr" />
+                            <div className="separator__text">New Messages</div>
+                        </div>
+                    );
+                }
+                postCtls.push(postCtl);
+                previousPostDay = utils.getDateForUnixTicks(post.create_at);
             }
-
+        }
-            var sameUser = i < order.length-1 && posts[order[i+1]].user_id === post.user_id  && post.create_at - posts[order[i+1]].create_at <= 1000*60*5 ? "same--user" : "";
+        else {
-            var sameRoot = i < order.length-1 && post.root_id != "" && (posts[order[i+1]].id === post.root_id || posts[order[i+1]].root_id === post.root_id) ? true : false;
+            postCtls.push(
-
+                <div ref="loadingscreen" className="loading-screen">
-            // we only hide the profile pic if the previous post is not a comment, the current post is not a comment, and the previous post was made by the same user as the current post
+                    <div className="loading__content">
-            var hideProfilePic = i < order.length-1 && posts[order[i+1]].user_id === post.user_id && posts[order[i+1]].root_id === '' && post.root_id === '';
+                    <h3>Loading</h3>
-
+                        <div id="round_1" className="round"></div>
-            // check if it's the last comment in a consecutive string of comments on the same post
+                        <div id="round_2" className="round"></div>
-            var isLastComment = false;
+                        <div id="round_3" className="round"></div>
-            if (utils.isComment(post)) {
-                // it is the last comment if it is last post in the channel or the next post has a different root post
-                isLastComment = (i === 0 || posts[order[i-1]].root_id != post.root_id);
-            }
-
-            var postCtl = <Post sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} posts={posts} hideProfilePic={hideProfilePic} isLastComment={isLastComment} />;
-
-            currentPostDay = utils.getDateForUnixTicks(post.create_at);
-            if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) {
-                postCtls.push(
-                    <div className="date-separator">
-                        <hr className="separator__hr" />
-                        <div className="separator__text">{currentPostDay.toDateString()}</div>
                     </div>
-                );
+                </div>
-            }
+            );
-
-            if (post.create_at > last_viewed && !rendered_last_viewed) {
-                rendered_last_viewed = true;
-                postCtls.push(
-                    <div className="new-separator">
-                        <hr id="new_message" className="separator__hr" />
-                        <div className="separator__text">New Messages</div>
-                    </div>
-                );
-            }
-            postCtls.push(postCtl);
-            previousPostDay = utils.getDateForUnixTicks(post.create_at);
         }
 
         return (

web/sass-files/sass/partials/_loading.scss

@@ -0,0 +1,68 @@
+.loading-screen {
+	display: table;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	@include box-sizing(border-box);
+	text-align: center;
+	.loading__content {
+		display: table-cell;
+		vertical-align: middle;
+		h3 {
+			font-weight: 400;
+			margin: 0 0.2em 0;
+			display: inline-block;
+		}
+	}
+}
+
+.loading-screen {
+	.loading__content {
+		.round {
+			background-color: #444;
+			width: 4px;
+			height: 4px;
+			display: inline-block;
+			margin: 0 1px;
+			opacity: 0.1;
+			@include border-radius(10px);
+			-moz-animation: move 0.75s infinite linear;
+			-webkit-animation: move 0.75s infinite linear;
+		}
+
+		#round_1 {
+			-moz-animation-delay: .2s;
+			-webkit-animation-delay: .2s;
+		}
+
+		#round_2 {
+			-moz-animation-delay: .4s;
+			-webkit-animation-delay: .4s;
+		}
+
+		#round_3 {
+			-moz-animation-delay: .6s;
+			-webkit-animation-delay: .6s;
+		}
+
+		@-moz-keyframes move {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0.1;
+			};
+		}
+
+		@-webkit-keyframes move {
+			0% {
+				opacity: 1;
+			}
+
+			100% {
+				opacity: 0.1;
+			};
+		}
+	}
+}

web/sass-files/sass/styles.scss

@@ -29,6 +29,7 @@
 @import "partials/modal";
 @import "partials/mentions";
 @import "partials/error";
+@import "partials/loading"; 
 
 // Responsive Css
 @import "partials/responsive";