From d0c6c7c743d98c6012e1cfb5ff88f2d9f5defa57 Mon Sep 17 00:00:00 2001
From: Corban-Lee <corbz.jones@gmail.com>
Date: Wed, 25 Sep 2024 11:41:46 +0100
Subject: [PATCH] server button placeholders

---
 apps/home/static/home/js/servers.js |  2 ++
 apps/home/templates/home/index.html | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/apps/home/static/home/js/servers.js b/apps/home/static/home/js/servers.js
index a139c88..349fe36 100644
--- a/apps/home/static/home/js/servers.js
+++ b/apps/home/static/home/js/servers.js
@@ -154,8 +154,10 @@ $(document).on("selectedServerChange", function() {
 // #region Load Servers
 
 async function loadServers() {
+    $(".server-loading-item").show();
     try {
         let response = await generateServers();
+        $(".server-loading-item").hide();
         response.forEach(server => {
             addToLoadedServers(server, false);
         });
diff --git a/apps/home/templates/home/index.html b/apps/home/templates/home/index.html
index 8d0d233..87653eb 100644
--- a/apps/home/templates/home/index.html
+++ b/apps/home/templates/home/index.html
@@ -15,6 +15,24 @@
         <div class="server-sidebar d-flex flex-column bg-body-tertiary py-3 border-end">
             <h6 class="d-none d-lg-block ms-3">Discord Servers</h6>
             <ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center px-lg-2 px-1 flex-nowrap overflow-y-auto">
+                {% for i in "01234567890123"|make_list %}
+                    <li class="nav-item server-loading-item">
+                        <div class="btn border-0 w-100 position-relative">
+                            <div class="d-flex justify-content-start align-items-center w-100 placeholder-wave">
+                                <div class="rounded-1 placeholder" style="min-width: 45px !important; min-height: 45px !important;"></div>
+                                <div class="text-start ps-2 w-100 flex-shrink-1 placeholder-wave">
+                                    {% if forloop.counter0|divisibleby:2 %}
+                                        <div class="placeholder rounded-1 w-50"></div>
+                                        <div class="placeholder rounded-1 w-75"></div>
+                                    {% else %}
+                                        <div class="placeholder rounded-1 w-75"></div>
+                                        <div class="placeholder rounded-1 w-50"></div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                {% endfor %}
             </ul>
             <ul class="d-flex flex-lg-row flex-column list-unstyled text-center flex-nowrap mb-0 px-lg-4 px-2 align-items-center">
                 <li>