From 30caea0c40a644194547267738c90ceca94fd93f Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Wed, 6 May 2026 14:28:20 -0600
Subject: [PATCH] Add loading spinner while waiting for public lobbies to load
 (#3867)

## Description:

Loading spinner:


https://github.com/user-attachments/assets/9033b707-7499-4a52-b0c6-d96d8f331ee3


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
---
 src/client/GameModeSelector.ts | 82 +++++++++++++++++++---------------
 1 file changed, 45 insertions(+), 37 deletions(-)

diff --git a/src/client/GameModeSelector.ts b/src/client/GameModeSelector.ts
index eb658253f..b2d7e0324 100644
--- a/src/client/GameModeSelector.ts
+++ b/src/client/GameModeSelector.ts
@@ -147,45 +147,53 @@ export class GameModeSelector extends LitElement {
         <ios-add-to-home-screen-banner></ios-add-to-home-screen-banner>
 
         <!-- Game cards grid -->
-        <div
-          class="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-4 sm:h-[min(24rem,40vh)]"
-        >
-          <!-- Left col: main card (desktop only) -->
-          ${ffa
-            ? html`<div class="hidden sm:block">
-                ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
-              </div>`
-            : nothing}
+        ${this.lobbies === null
+          ? html`<div
+              class="flex items-center justify-center h-44 sm:h-[min(24rem,40vh)]"
+            >
+              <span
+                class="w-24 h-24 border-[6px] border-blue-500/30 border-t-blue-500 rounded-full animate-spin"
+              ></span>
+            </div>`
+          : html`<div
+              class="grid grid-cols-1 sm:grid-cols-[2fr_1fr] gap-4 sm:h-[min(24rem,40vh)]"
+            >
+              <!-- Left col: main card (desktop only) -->
+              ${ffa
+                ? html`<div class="hidden sm:block">
+                    ${this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))}
+                  </div>`
+                : nothing}
 
-          <!-- Right col: special + teams (desktop only) -->
-          <div class="hidden sm:flex sm:flex-col sm:gap-4">
-            ${special
-              ? html`<div class="flex-1 min-h-0">
-                  ${this.renderSpecialLobbyCard(special)}
-                </div>`
-              : nothing}
-            ${teams
-              ? html`<div class="flex-1 min-h-0">
-                  ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
-                </div>`
-              : nothing}
-          </div>
+              <!-- Right col: special + teams (desktop only) -->
+              <div class="hidden sm:flex sm:flex-col sm:gap-4">
+                ${special
+                  ? html`<div class="flex-1 min-h-0">
+                      ${this.renderSpecialLobbyCard(special)}
+                    </div>`
+                  : nothing}
+                ${teams
+                  ? html`<div class="flex-1 min-h-0">
+                      ${this.renderLobbyCard(teams, this.getLobbyTitle(teams))}
+                    </div>`
+                  : nothing}
+              </div>
 
-          <!-- Mobile: special, ffa, teams inline -->
-          <div class="sm:hidden">
-            ${special ? this.renderSpecialLobbyCard(special) : nothing}
-          </div>
-          <div class="sm:hidden">
-            ${ffa
-              ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
-              : nothing}
-          </div>
-          <div class="sm:hidden">
-            ${teams
-              ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
-              : nothing}
-          </div>
-        </div>
+              <!-- Mobile: special, ffa, teams inline -->
+              <div class="sm:hidden">
+                ${special ? this.renderSpecialLobbyCard(special) : nothing}
+              </div>
+              <div class="sm:hidden">
+                ${ffa
+                  ? this.renderLobbyCard(ffa, this.getLobbyTitle(ffa))
+                  : nothing}
+              </div>
+              <div class="sm:hidden">
+                ${teams
+                  ? this.renderLobbyCard(teams, this.getLobbyTitle(teams))
+                  : nothing}
+              </div>
+            </div>`}
 
         <!-- Solo: full width, desktop only -->
         <div class="hidden sm:block h-14">