From 7eeda3e6aef65c935320158e43fcf5ec6004c120 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Mon, 19 Jan 2026 15:38:26 -0700
Subject: [PATCH] Add loading spinner when joining

---
 components/Landing.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/Landing.tsx b/components/Landing.tsx
index 1f49321..e2731f6 100644
--- a/components/Landing.tsx
+++ b/components/Landing.tsx
@@ -72,6 +72,12 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
       setPin(initialPin);
     }
   }, [initialPin]);
+
+  useEffect(() => {
+    if (error) {
+      setIsJoining(false);
+    }
+  }, [error]);
   
   const modalParam = searchParams.get('modal');
   const libraryOpen = modalParam === 'library';
@@ -120,6 +126,7 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
   const [editingDefaultConfig, setEditingDefaultConfig] = useState<GameConfig | null>(null);
   const [gameInfo, setGameInfo] = useState<{ randomNamesEnabled: boolean; quizTitle: string } | null>(null);
   const [checkingPin, setCheckingPin] = useState(false);
+  const [isJoining, setIsJoining] = useState(false);
   
   const hasImageFile = selectedFiles.some(f => f.type.startsWith('image/'));
   const hasDocumentFile = selectedFiles.some(f => !f.type.startsWith('image/') && !['application/pdf', 'text/plain', 'text/markdown', 'text/csv', 'text/html'].includes(f.type));
@@ -268,7 +275,8 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
 
   const handleJoinSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (pin.trim() && (gameInfo?.randomNamesEnabled || name.trim())) {
+    if (pin.trim() && (gameInfo?.randomNamesEnabled || name.trim()) && !isJoining) {
+      setIsJoining(true);
       onJoin(pin, name.trim() || 'Player');
     }
   };
@@ -611,10 +619,16 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
               )}
               <button
                 type="submit"
-                disabled={!pin.trim() || (!gameInfo?.randomNamesEnabled && !name.trim()) || checkingPin}
+                disabled={!pin.trim() || (!gameInfo?.randomNamesEnabled && !name.trim()) || checkingPin || isJoining}
                 className="w-full bg-[#333] text-white py-4 rounded-2xl text-xl font-black shadow-[0_6px_0_#000] active:shadow-none active:translate-y-[6px] transition-all hover:bg-black flex items-center justify-center gap-3 disabled:opacity-50 disabled:cursor-not-allowed"
               >
-                {checkingPin ? <Loader2 className="animate-spin" /> : <Play fill="currentColor" />} Join Game
+                {isJoining ? (
+                  <><Loader2 className="animate-spin" /> Connecting...</>
+                ) : checkingPin ? (
+                  <><Loader2 className="animate-spin" /> Join Game</>
+                ) : (
+                  <><Play fill="currentColor" /> Join Game</>
+                )}
               </button>
             </form>
         )}