Fix

components/Lobby.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Player } from '../types';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Sparkles, User, X, Link, Check, QrCode, Crown, LogOut, UserX } from 'lucide-react';
+import { Sparkles, User, X, Link, Check, QrCode, Crown, LogOut, UserX, Loader2 } from 'lucide-react';
 import { QRCodeSVG } from 'qrcode.react';
 import { PlayerAvatar } from './PlayerAvatar';
 import toast from 'react-hot-toast';
@@ -28,6 +28,12 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
   const currentPlayer = currentPlayerId ? players.find(p => p.id === currentPlayerId) : null;
   const [linkCopied, setLinkCopied] = useState(false);
   const [isQrModalOpen, setIsQrModalOpen] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+
+  const handleStart = () => {
+    setIsStarting(true);
+    onStart();
+  };
   const isPresenter = currentPlayerId === presenterId;
   const canSelectPresenter = isHost && !hostParticipates && onSetPresenter;
 
@@ -245,11 +251,19 @@ export const Lobby: React.FC<LobbyProps> = ({ quizTitle, players, gamePin, role,
                         </button>
                     )}
                     <button
-                        onClick={onStart}
+                        onClick={handleStart}
-                        disabled={realPlayers.length === 0}
+                        disabled={realPlayers.length === 0 || isStarting}
-                        className="bg-white text-theme-primary px-8 md:px-16 py-3 md:py-5 rounded-full text-xl md:text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2"
+                        className="bg-white text-theme-primary px-8 md:px-16 py-3 md:py-5 rounded-full text-xl md:text-3xl font-black hover:scale-105 active:scale-95 transition-all shadow-[0_8px_0_rgba(0,0,0,0.2)] disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none disabled:translate-y-2 flex items-center gap-3"
                     >
-                        Start
+                        {isStarting ? (
+                          <>
+                            <Loader2 size={24} className="animate-spin md:w-8 md:h-8" />
+                            <span className="hidden md:inline">Starting...</span>
+                            <span className="md:hidden">...</span>
+                          </>
+                        ) : (
+                          'Start'
+                        )}
                     </button>
                 </motion.div>
             </>

components/RevealScreen.tsx

@@ -202,13 +202,13 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
         </motion.div>
       </div>
 
-      {/* Bottom sheet for incorrect answers - includes button inside */}
+      {/* Bottom sheet for incorrect answers */}
       {!isCorrect && (
         <motion.div 
           initial={{ y: "100%" }}
           animate={{ y: 0 }}
           transition={{ delay: 0.5, type: 'spring' }}
-          className="bg-black/30 backdrop-blur-md p-4 md:p-6 z-20 shrink-0"
+          className={`bg-black/30 backdrop-blur-md p-4 md:p-6 z-20 shrink-0 ${showContinueButton ? 'pb-20 md:pb-24' : ''}`}
         >
           {selectedOption && selectedOption.reason && (
             <div className="mb-3 md:mb-4 pb-3 md:pb-4 border-b border-white/20">
@@ -232,31 +232,17 @@ export const RevealScreen: React.FC<RevealScreenProps> = ({
                 </p>
               )}
           </div>
-          
-          {/* Continue button inside bottom sheet for incorrect answers */}
-          {showContinueButton && (
-            <motion.button
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.7 }}
-              onClick={handleContinue}
-              className="mt-4 w-full bg-gray-900 text-white px-6 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_4px_0_rgba(0,0,0,0.5)] active:shadow-none active:translate-y-[4px] transition-all flex items-center justify-center gap-2 cursor-pointer"
-            >
-              Continue to Scoreboard
-              <ChevronRight className="w-5 h-5 md:w-6 md:h-6" strokeWidth={3} />
-            </motion.button>
-          )}
         </motion.div>
       )}
 
-      {/* Continue button for correct answers - fixed at bottom */}
+      {/* Continue button - fixed at bottom for both correct and incorrect */}
-      {isCorrect && showContinueButton && (
+      {showContinueButton && (
         <motion.button
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ delay: 0.5 }}
+          transition={{ delay: isCorrect ? 0.5 : 0.7 }}
           onClick={handleContinue}
-          className="fixed bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 z-30 cursor-pointer"
+          className="fixed bottom-4 md:bottom-6 left-1/2 -translate-x-1/2 bg-white text-gray-900 px-6 md:px-8 py-3 md:py-4 rounded-xl md:rounded-2xl text-base md:text-xl font-black shadow-[0_6px_0_rgba(0,0,0,0.3)] active:shadow-none active:translate-y-[6px] transition-all flex items-center gap-2 hover:bg-gray-100 z-30 cursor-pointer"
         >
           Continue to Scoreboard
           <ChevronRight className="w-5 h-5 md:w-7 md:h-7" strokeWidth={3} />