Improve UX while server statuses are loading

styles/sass/style.scss

@@ -175,7 +175,7 @@ a {
       padding: 0.25em 0.5em 0.25em 0.5em;
       border-radius: 2px;
 
-      &:disabled {
+      &:disabled, &.disabled {
         background: gray;
       }
     }
@@ -205,4 +205,12 @@ a {
 .icon {
   height: 1.5em;
   vertical-align: middle;
+}
+
+h1 {
+  text-align: center;
+
+  &:first-child {
+    margin-top: 0;
+  }
 }

templates/modal.html.tera

@@ -4,13 +4,20 @@
         <p>In order to participate in challenges, you must be a member of a participating Discord server.</p>
         <h2>Join a participating server</h2>
     </div>
+    <div class="participating">
+        <h1>Participating servers</h1>
+    </div>
     <div class="servers">
         {% for guild in settings.guilds %}
         {% if guild.hidden or not guild.invite %}{% continue %}{% endif %}
         <div id="{{ guild.id }}" {% if guild.recommended %} class="recommended"{% endif %}>
             <img src="https://cdn.discordapp.com/icons/{{ guild.id }}/{{ guild.icon }}.webp?size=96" alt="Server icon"> 
             <div class="name">{{ guild.name }}</div>
-            <a href="https://discord.gg/{{ guild.invite }}" class="joinButton">Join</a>
+            <a href="https://discord.gg/{{ guild.invite }}" class="joinButton disabled">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="icon" style="height: 1em">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+                </svg>
+            </a>
             {% if guild.recommended %}
             <div class="label-wrapper">
                 <div class="label">Recommended</div>
@@ -24,8 +31,8 @@
 const dialog = document.querySelector("dialog");
 // Fetch guilds
 let guilds = null;
-let is_in_participating_server = null;
 const getGuilds = async () => {
+    let is_in_participating_server = false;
     if (guilds === null) {
         // Create the guilds dictionary object
         guilds = {};
@@ -39,12 +46,13 @@ const getGuilds = async () => {
             const [id, is_member] = event.data.split(',');
 
             // Add the key-value pair to the guilds dictionary
-            guilds[id] = is_member === 'true';
+            const joined = is_member === 'true';
+            guilds[id] = joined;
 
-            if (guilds[id]) {
-                setJoined(id);
+            if (joined) {
                 is_in_participating_server = true;
             }
+            setJoined(id, joined);
         });
 
         // Function to block execution until SSE events are done
@@ -62,22 +70,17 @@ const getGuilds = async () => {
         // Call the function to block execution until SSE events are done
         await waitForSSE()
     }
-    return guilds;
+    return is_in_participating_server;
 }
 // Show server modal, both for welcome and server list
 const showServers = async () => {
     dialog.showModal();
     // If the user is logged in, load the guild list
     // and check if they have joined the available servers
-    const guilds = await getGuilds();
-    Object.keys(guilds).forEach(id => {
-        if (guilds[id]) {
-            setJoined(id);
-        }
-    })
+    await getGuilds();
 };
 // Switch Join button to Joined for server
-const setJoined = id => {
+const setJoined = (id, joined) => {
     element = document.getElementById(id);
     if (element === null) {
         return;
@@ -87,12 +90,17 @@ const setJoined = id => {
     if (a === null) {
         return;
     }
-    const button = document.createElement("button");
-    button.tagName = "button";
-    button.className = "joinButton";
-    button.disabled = true;
-    button.innerHTML = "Joined"
-    element.querySelector("a").replaceWith(button);
+    if (joined) {
+        const button = document.createElement("button");
+        button.tagName = "button";
+        button.className = "joinButton";
+        button.disabled = true;
+        button.innerHTML = "Joined"
+        a.replaceWith(button);
+    } else {
+        a.innerHTML = "Join";
+        a.classList.remove("disabled");
+    }
 }
 
 // Check for welcomed cookie
@@ -104,8 +112,7 @@ const loadServers = async () => {
         // in case user pressed Join servers button
         document.querySelector("dialog .welcome").style.display = "none";
     } else {
-        const guilds = await getGuilds();
-        if (!is_in_participating_server) {
+        if (!(await getGuilds())) {
             showServers();
         }
         // Even if already in participating server,
@@ -117,6 +124,7 @@ if (welcomed()) {
     // TODO: Remove welcome text via cookie check in template?
     document.querySelector("dialog .welcome").style.display = "none";
 } else {
+    document.querySelector("dialog .participating").style.display = "none";
     // If not welcomed, see if welcome is necessary
     loadServers();
 }