Lazyload member list as it can be detrimental to user experience

webapp/titanembeds/blueprints/api/api.py

@@ -433,21 +433,17 @@ def get_guild_guest_icon(guild_id):
     return guest_icon if guest_icon else url_for('static', filename='img/titanembeds_square.png')
 
 def process_query_guild(guild_id, visitor=False):
-    widget = discord_api.get_widget(guild_id)
     forced_role = get_forced_role(guild_id)
     channels = get_guild_channels(guild_id, visitor, forced_role=forced_role)
-    if widget.get("success", True):
-        discordmembers = get_online_discord_users(guild_id, widget)
-    else:
-        discordmembers = [{"id": 0, "color": "FFD6D6", "status": "dnd", "username": "Discord Server Widget is Currently Disabled"}]
-    embedmembers = get_online_embed_users(guild_id)
+    discordmembers = [] # Discord members & embed members listed here is moved to its own api endpoint
+    embedmembers = {"authenticated": [], "unauthenticated": []} 
     emojis = get_guild_emojis(guild_id)
     roles = get_guild_roles(guild_id)
     guest_icon = get_guild_guest_icon(guild_id)
     if visitor:
         for channel in channels:
             channel["write"] = False
-    return jsonify(channels=channels, discordmembers=discordmembers, embedmembers=embedmembers, emojis=emojis, roles=roles, guest_icon=guest_icon, instant_invite=widget.get("instant_invite", None))
+    return jsonify(channels=channels, discordmembers=discordmembers, embedmembers=embedmembers, emojis=emojis, roles=roles, guest_icon=guest_icon, instant_invite=None)
 
 @api.route("/query_guild", methods=["GET"])
 @valid_session_required(api=True)
@@ -469,6 +465,40 @@ def query_guild_visitor():
             abort(403)
         return process_query_guild(guild_id, True)
     abort(404)
+    
+@api.route("/server_members", methods=["GET"])
+@abort_if_guild_disabled()
+@valid_session_required(api=True)
+def server_members():
+    guild_id = request.args.get("guild_id", None)
+    if not check_guild_existance(guild_id):
+        abort(404)
+    if not check_user_in_guild(guild_id):
+        abort(403)
+    members = query_server_members(guild_id)
+    return jsonify(members)
+
+@api.route("/server_members_visitor", methods=["GET"])
+@abort_if_guild_disabled()
+def server_members_visitor():
+    guild_id = request.args.get("guild_id", None)
+    if not check_guild_existance(guild_id):
+        abort(404)
+    if not guild_accepts_visitors(guild_id):
+        abort(403)
+    members = query_server_members(guild_id)
+    return jsonify(members)
+
+def query_server_members(guild_id):
+    widget = discord_api.get_widget(guild_id)
+    if widget.get("success", True):
+        discordmembers = get_online_discord_users(guild_id, widget)
+        widgetenabled = True
+    else:
+        discordmembers = [{"id": 0, "color": "FFD6D6", "status": "dnd", "username": "Discord Server Widget is Currently Disabled"}]
+        widgetenabled = False
+    embedmembers = get_online_embed_users(guild_id)
+    return {"discordmembers": discordmembers, "embedmembers": embedmembers, "widgetenabled": widgetenabled}
 
 @api.route("/create_authenticated_user", methods=["POST"])
 @discord_users_only(api=True)

webapp/titanembeds/static/css/embed.css

@@ -271,12 +271,12 @@ nav .brand-logo {
 }
 
 #discord-members > li > a.subheader,
-#members-nav > li:nth-child(1) > a,
+#online-server-members-header > a,
 #discord-members-count,
 #embed-discord-members-count,
-#members-nav > li:nth-child(4) > a,
+#authenticated-embed-users-header > a,
 #guest-members-count,
-#members-nav > li:nth-child(6) > a {
+#guest-embed-users-header > a {
   text-transform: uppercase;
 }
 
@@ -1098,7 +1098,7 @@ p.mentioned span.chatmessage {
   display: none;
 }
 
-#message-spinner > div {
+#message-spinner > div, #members-spinner > div {
   background-color: white;
 }
 
@@ -1106,6 +1106,11 @@ p.mentioned span.chatmessage {
   background-color: pink;
 }
 
+#members-spinner {
+  position: absolute;
+  left: 45%;
+}
+
 /* CSS Variables */
 :root {
   /*--<var>: <value>*/

webapp/titanembeds/static/js/embed.js

@@ -55,6 +55,7 @@
     var is_dragging_chatcontainer = false; // Track if is dragging on chatcontainer (does not trigger messagebox focus) or not
     var localstorage_avaliable = false; // Check if localstorage is avaliable on this browser
     var shouldUtilizeGateway = false; // Don't connect to gateway until page is focused or has interaction.
+    var discord_users_list_enabled = false; // Allow automatic population of discord users list
 
     function element_in_view(element, fullyInView) {
         var pageTop = $(window).scrollTop();
@@ -204,6 +205,19 @@
         return funct.promise();
     }
     
+    function server_members() {
+        var url = "/api/server_members";
+        if (visitor_mode) {
+            url = url += "_visitor";
+        }
+        var funct = $.ajax({
+            dataType: "json",
+            url: url,
+            data: {"guild_id": guild_id}
+        });
+        return funct.promise();
+    }
+    
     function performLocalStorageTest() {
         var test = 'test';
         try {
@@ -302,6 +316,17 @@
             opacity: .5,
         });
         
+        $("#members-btn").click(function () {
+            var sm = server_members();
+            sm.done(function (data) {
+                $("#members-spinner").hide();
+                discord_users_list_enabled = data.widgetenabled;
+                fill_discord_members(data.discordmembers);
+                fill_authenticated_users(data.embedmembers.authenticated);
+                fill_unauthenticated_users(data.embedmembers.unauthenticated);
+            });
+        });
+        
         $("#nameplate").click(function () {
             $("#userembedmodal").modal("open");
         });
@@ -695,9 +720,6 @@
         update_emoji_picker();
         guild_roles_list = guildobj.roles;
         fill_channels(guildobj.channels);
-        fill_discord_members(guildobj.discordmembers);
-        fill_authenticated_users(guildobj.embedmembers.authenticated);
-        fill_unauthenticated_users(guildobj.embedmembers.unauthenticated);
         $("#instant-inv").attr("href", guildobj.instant_invite);
         run_fetch_routine();
         initiate_websockets();
@@ -838,6 +860,9 @@
     }
 
     function fill_discord_members(discordmembers) {
+        if (!discord_users_list_enabled) {
+            return;
+        }
         discord_users_list = discordmembers;
         var template = $('#mustache_authedusers').html();
         Mustache.parse(template);

webapp/titanembeds/static/themes/DiscordDark/css/style.css

@@ -99,12 +99,12 @@ margin-right:10px;
 /*height:150%*/
 }
 #discord-members > li > a.subheader,
-#members-nav > li:nth-child(1) > a,
+#online-server-members-header > a,
 #discord-members-count,
 #embed-discord-members-count,
-#members-nav > li:nth-child(4) > a,
+#authenticated-embed-users-header > a,
 #guest-members-count,
-#members-nav > li:nth-child(6) > a {
+#guest-embed-users-header > a {
 text-transform: uppercase;
 color:rgb(130,131,134)
 }

webapp/titanembeds/templates/embed.html.j2

@@ -109,15 +109,19 @@
       </ul>
 
       <ul id="members-nav" class="side-nav">
-        <li><a class="subheader">{{ _("Online Server Members") }} - <span id="discord-members-count"></span></a></li>
+        <div id="members-spinner" class="sk-double-bounce">
+          <div class="sk-child sk-double-bounce1"></div>
+          <div class="sk-child sk-double-bounce2"></div>
+        </div>
+        <li id="online-server-members-header"><a class="subheader">{{ _("Online Server Members") }} - <span id="discord-members-count">0</span></a></li>
         <span id="discord-members"></span>
 
-        <li><div class="divider"></div></li>
+        <li id="member-divider-1"><div class="divider"></div></li>
 
-        <li><a class="subheader">{{ _("Authenticated Embed Users") }} - <span id="embed-discord-members-count"></span></a></li>
+        <li id="authenticated-embed-users-header"><a class="subheader">{{ _("Authenticated Embed Users") }} - <span id="embed-discord-members-count">0</span></a></li>
         <span id="embed-discord-members"></span>
 
-        <li><a class="subheader">{{ _("Guest Embed Users") }} - <span id="guest-members-count"></span></a></li>
+        <li id="guest-embed-users-header"><a class="subheader">{{ _("Guest Embed Users") }} - <span id="guest-members-count">0</span></a></li>
         <span id="embed-unauth-users"></span>
       </ul>
 

webapp/titanembeds/utils.py

@@ -71,6 +71,8 @@ def guild_ratelimit_key():
     return (ip + guild_id)
 
 def check_guild_existance(guild_id):
+    if not is_int(guild_id):
+        return False
     guild = redisqueue.get_guild(guild_id)
     if not guild:
         return False