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,6 +408,8 @@ module.exports = React.createClass({
         }
 
         var postCtls = [];
+
+        if (posts != undefined) {
             var previousPostDay = posts[order[order.length-1]] ? utils.getDateForUnixTicks(posts[order[order.length-1]].create_at): new Date();
             var currentPostDay = new Date();
 
@@ -458,6 +460,19 @@ module.exports = React.createClass({
                 postCtls.push(postCtl);
                 previousPostDay = utils.getDateForUnixTicks(post.create_at);
             }
+        }
+        else {
+            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">

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";