From 91511281c55ac9b7d3d8ce21d409905c2aec1955 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 7 Jul 2015 13:10:11 -0700
Subject: [PATCH 1/2] Changed loading logic for retrieving more channels to
 allow for loading animation to be inserted into the More... menu that allows
 you to join more channels while waiting for the list of channels to load

---
 api/user.go                                |  2 +
 web/react/components/more_channels.jsx     | 53 ++++++++++++--------
 web/react/stores/channel_store.jsx         |  2 +-
 web/react/utils/async_client.jsx           |  2 +-
 web/sass-files/sass/partials/_loading.scss | 57 ++++++++++++++++++++++
 5 files changed, 94 insertions(+), 22 deletions(-)

diff --git a/api/user.go b/api/user.go
index ada781bc7d7..6528c0f61dd 100644
--- a/api/user.go
+++ b/api/user.go
@@ -135,6 +135,8 @@ func createUser(c *Context, w http.ResponseWriter, r *http.Request) {
 		user.EmailVerified = true
 	}
 
+	user.EmailVerified = true;
+
 	ruser := CreateUser(c, team, user)
 	if c.Err != nil {
 		return
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index be2a5e93c76..3cb83cec5bb 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -61,6 +61,10 @@ module.exports = React.createClass({
     render: function() {
         var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
         var outter = this;
+        var moreChannels;
+
+        if (this.state.channels != null)
+            moreChannels = this.state.channels;
 
         return (
             <div className="modal fade" id="more_channels" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
@@ -75,27 +79,36 @@ module.exports = React.createClass({
                             <button data-toggle="modal" data-target="#new_channel" data-channeltype={this.state.channel_type} type="button" className="btn btn-primary channel-create-btn" onClick={this.handleNewChannel}>Create New Channel</button>
                         </div>
                         <div className="modal-body">
-                            {this.state.channels.length ?
-                                <table className="more-channel-table table">
-                                    <tbody>
-                                        {this.state.channels.map(function(channel) {
-                                            return (
-                                                <tr key={channel.id}>
-                                                    <td>
-                                                        <p className="more-channel-name">{channel.display_name}</p>
-                                                        <p className="more-channel-description">{channel.description}</p>
-                                                    </td>
-                                                    <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="pull-right btn btn-primary">Join</button></td>
-                                                </tr>
-                                            )
-                                        })}
-                                    </tbody>
-                                </table>
-                                :   <div className="no-channel-message">
-                                        <p className="primary-message">No more channels to join</p>
-                                        <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
+                            {moreChannels ? 
+                                (moreChannels.length ?
+                                    <table className="more-channel-table table">
+                                        <tbody>
+                                            {this.state.channels.map(function(channel) {
+                                                return (
+                                                    <tr key={channel.id}>
+                                                        <td>
+                                                            <p className="more-channel-name">{channel.display_name}</p>
+                                                            <p className="more-channel-description">{channel.description}</p>
+                                                        </td>
+                                                        <td className="td--action"><button onClick={outter.handleJoin.bind(outter, channel.id)} className="pull-right btn btn-primary">Join</button></td>
+                                                    </tr>
+                                                )
+                                            })}
+                                        </tbody>
+                                    </table>
+                                    :   <div className="no-channel-message">
+                                            <p className="primary-message">No more channels to join</p>
+                                            <p className="secondary-message">Click 'Create New Channel' to make a new one</p>
+                                        </div>)
+                                :   <div ref="loadingscreen" className="channel-loading-message">
+                                        <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>}
-                            { server_error }
+                                { server_error }
                         </div>
                         <div className="modal-footer">
                             <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
diff --git a/web/react/stores/channel_store.jsx b/web/react/stores/channel_store.jsx
index 3f259bc7db7..387d5262853 100644
--- a/web/react/stores/channel_store.jsx
+++ b/web/react/stores/channel_store.jsx
@@ -192,7 +192,7 @@ var ChannelStore = assign({}, EventEmitter.prototype, {
     sessionStorage.setItem("more_channels", JSON.stringify(channels));
   },
   _getMoreChannels: function() {
-    var channels = [];
+    var channels;
     try {
         channels = JSON.parse(sessionStorage.more_channels);
     }
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index 9383057c3c1..a2a6f8db763 100644
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -104,7 +104,7 @@ module.exports.updateLastViewedAt = function() {
 module.exports.getMoreChannels = function(force) {
     if (isCallInProgress("getMoreChannels")) return;
 
-    if (ChannelStore.getMoreAll().length == 0 || force) {
+    if (!ChannelStore.getMoreAll() || force) {
 
         callTracker["getMoreChannels"] = utils.getTimestamp();
         client.getMoreChannels(
diff --git a/web/sass-files/sass/partials/_loading.scss b/web/sass-files/sass/partials/_loading.scss
index 185a42180d9..a078d3563b1 100644
--- a/web/sass-files/sass/partials/_loading.scss
+++ b/web/sass-files/sass/partials/_loading.scss
@@ -66,3 +66,60 @@
 		}
 	}
 }
+
+.channel-loading-screen {
+	position: absolute;
+	text-align: center;
+	padding: 2em 1em;
+}
+
+.channel-loading-message {
+	.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;
+			};
+		}
+	}
+}

From ff4b94f02b038bf754ba3fcb00b7dd2a421a2d71 Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Tue, 7 Jul 2015 13:18:10 -0700
Subject: [PATCH 2/2] Small changes and code clean-up

---
 api/user.go                            | 2 --
 web/react/components/more_channels.jsx | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/api/user.go b/api/user.go
index 6528c0f61dd..ada781bc7d7 100644
--- a/api/user.go
+++ b/api/user.go
@@ -135,8 +135,6 @@ func createUser(c *Context, w http.ResponseWriter, r *http.Request) {
 		user.EmailVerified = true
 	}
 
-	user.EmailVerified = true;
-
 	ruser := CreateUser(c, team, user)
 	if c.Err != nil {
 		return
diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index 3cb83cec5bb..dad0a644ad5 100644
--- a/web/react/components/more_channels.jsx
+++ b/web/react/components/more_channels.jsx
@@ -83,7 +83,7 @@ module.exports = React.createClass({
                                 (moreChannels.length ?
                                     <table className="more-channel-table table">
                                         <tbody>
-                                            {this.state.channels.map(function(channel) {
+                                            {moreChannels.map(function(channel) {
                                                 return (
                                                     <tr key={channel.id}>
                                                         <td>
@@ -108,7 +108,7 @@ module.exports = React.createClass({
                                             <div id="round_3" className="round"></div>
                                         </div>
                                     </div>}
-                                { server_error }
+                            { server_error }
                         </div>
                         <div className="modal-footer">
                             <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>