jyapayne/kaboot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add loading spinner when joining

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-19 15:38:26 -07:00
commit 7eeda3e6ae
No known key found for this signature in database
GPG key ID: DDF6AF5B21B407D4
1 changed files with 17 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/Landing.tsx
View file

@ -72,6 +72,12 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
setPin(initialPin); setPin(initialPin);
} }
}, [initialPin]); }, [initialPin]);
useEffect(() => {
if (error) {
setIsJoining(false);
}
}, [error]);
const modalParam = searchParams.get('modal'); const modalParam = searchParams.get('modal');
const libraryOpen = modalParam === 'library'; 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 [editingDefaultConfig, setEditingDefaultConfig] = useState<GameConfig | null>(null);
const [gameInfo, setGameInfo] = useState<{ randomNamesEnabled: boolean; quizTitle: string } | null>(null); const [gameInfo, setGameInfo] = useState<{ randomNamesEnabled: boolean; quizTitle: string } | null>(null);
const [checkingPin, setCheckingPin] = useState(false); const [checkingPin, setCheckingPin] = useState(false);
const [isJoining, setIsJoining] = useState(false);
const hasImageFile = selectedFiles.some(f => f.type.startsWith('image/')); 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)); 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) => { const handleJoinSubmit = (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
if (pin.trim() && (gameInfo?.randomNamesEnabled || name.trim())) { if (pin.trim() && (gameInfo?.randomNamesEnabled || name.trim()) && !isJoining) {
setIsJoining(true);
onJoin(pin, name.trim() || 'Player'); onJoin(pin, name.trim() || 'Player');
} }
}; };
@ -611,10 +619,16 @@ export const Landing: React.FC<LandingProps> = ({ onGenerate, onCreateManual, on
)} )}
<button <button
type="submit" 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" 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> </button>
</form> </form>
)} )}