feat: Add ConnectionOverlay component for improved socket connection handling and user feedback

app/components/AutodraftSettings.tsx

@@ -22,7 +22,6 @@ export function AutodraftSettings({
 }: AutodraftSettingsProps) {
   const [localEnabled, setLocalEnabled] = useState(isEnabled);
   const [localMode, setLocalMode] = useState<"next_pick" | "while_on">(mode);
-  const [isUpdating, setIsUpdating] = useState(false);
 
   // Sync local state with props when they change (from socket events)
   useEffect(() => {
@@ -35,7 +34,6 @@ export function AutodraftSettings({
 
   const handleToggle = async (checked: boolean) => {
     setLocalEnabled(checked);
-    setIsUpdating(true);
 
     try {
       const formData = new FormData();
@@ -60,14 +58,11 @@ export function AutodraftSettings({
       // Revert on error
       setLocalEnabled(!checked);
       console.error("Error updating autodraft settings:", error);
-    } finally {
-      setIsUpdating(false);
     }
   };
 
   const handleModeChange = async (newMode: "next_pick" | "while_on") => {
     setLocalMode(newMode);
-    setIsUpdating(true);
 
     try {
       const formData = new FormData();
@@ -92,8 +87,6 @@ export function AutodraftSettings({
       // Revert on error
       setLocalMode(localMode);
       console.error("Error updating autodraft mode:", error);
-    } finally {
-      setIsUpdating(false);
     }
   };
 

app/components/draft/ConnectionOverlay.tsx

@@ -0,0 +1,103 @@
+import { Button } from "~/components/ui/button";
+import { Card } from "~/components/ui/card";
+
+interface ConnectionOverlayProps {
+  isConnected: boolean;
+  isReconnecting: boolean;
+  connectionError: string | null;
+}
+
+export function ConnectionOverlay({
+  isConnected,
+  isReconnecting,
+  connectionError,
+}: ConnectionOverlayProps) {
+  // Don't show overlay if connected
+  if (isConnected) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[100]">
+      <Card className="w-full max-w-md mx-4 p-8 text-center">
+        <div className="flex flex-col items-center gap-6">
+          {/* Spinner or Error Icon */}
+          {connectionError ? (
+            <div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-950 flex items-center justify-center">
+              <svg
+                className="w-8 h-8 text-red-600 dark:text-red-400"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+          ) : (
+            <div className="relative w-16 h-16">
+              <div className="absolute inset-0 border-4 border-primary/30 rounded-full"></div>
+              <div className="absolute inset-0 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+            </div>
+          )}
+
+          {/* Title */}
+          <div>
+            <h2 className="text-2xl font-bold mb-2">
+              {connectionError
+                ? "Connection Error"
+                : isReconnecting
+                ? "Reconnecting..."
+                : "Connecting to Draft"}
+            </h2>
+
+            {/* Message */}
+            <p className="text-muted-foreground">
+              {connectionError ? (
+                connectionError
+              ) : isReconnecting ? (
+                "Lost connection to the draft server. Attempting to reconnect..."
+              ) : (
+                "Please wait while we connect you to the live draft room."
+              )}
+            </p>
+          </div>
+
+          {/* Action Button (only on persistent error) */}
+          {connectionError && (
+            <Button
+              onClick={() => window.location.reload()}
+              className="w-full"
+              variant="default"
+            >
+              Reload Page
+            </Button>
+          )}
+
+          {/* Loading Dots */}
+          {!connectionError && (
+            <div className="flex gap-1.5">
+              <div
+                className="w-2 h-2 bg-primary rounded-full animate-bounce"
+                style={{ animationDelay: "0ms" }}
+              ></div>
+              <div
+                className="w-2 h-2 bg-primary rounded-full animate-bounce"
+                style={{ animationDelay: "150ms" }}
+              ></div>
+              <div
+                className="w-2 h-2 bg-primary rounded-full animate-bounce"
+                style={{ animationDelay: "300ms" }}
+              ></div>
+            </div>
+          )}
+        </div>
+      </Card>
+    </div>
+  );
+}

app/hooks/useDraftSocket.ts

@@ -4,6 +4,8 @@ import { io, Socket } from "socket.io-client";
 interface UseDraftSocketReturn {
   socket: Socket | null;
   isConnected: boolean;
+  connectionError: string | null;
+  isReconnecting: boolean;
   on: (event: string, callback: (...args: any[]) => void) => void;
   off: (event: string, callback?: (...args: any[]) => void) => void;
 }
@@ -11,6 +13,8 @@ interface UseDraftSocketReturn {
 export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocketReturn {
   const socketRef = useRef<Socket | null>(null);
   const [isConnected, setIsConnected] = useState(false);
+  const [connectionError, setConnectionError] = useState<string | null>(null);
+  const [isReconnecting, setIsReconnecting] = useState(false);
 
   useEffect(() => {
     // Connect to Socket.IO server
@@ -24,17 +28,40 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
     socket.on("connect", () => {
       console.log("Connected to Socket.IO:", socket.id);
       setIsConnected(true);
+      setConnectionError(null);
+      setIsReconnecting(false);
       // Join the draft room with optional teamId
       socket.emit("join-draft", seasonId, teamId);
     });
 
-    socket.on("disconnect", () => {
+    socket.on("disconnect", (reason) => {
-      console.log("Disconnected from Socket.IO");
+      console.log("Disconnected from Socket.IO:", reason);
       setIsConnected(false);
+      if (reason === "io server disconnect") {
+        // Server disconnected the socket, need to manually reconnect
+        setConnectionError("Server disconnected. Please refresh the page.");
+      } else {
+        // Client disconnected or network issue, will auto-reconnect
+        setIsReconnecting(true);
+      }
     });
 
     socket.on("connect_error", (error) => {
       console.error("Socket.IO connection error:", error);
+      setConnectionError(error.message || "Failed to connect to draft server");
+      setIsReconnecting(false);
+    });
+
+    socket.io.on("reconnect_attempt", () => {
+      console.log("Attempting to reconnect...");
+      setIsReconnecting(true);
+      setConnectionError(null);
+    });
+
+    socket.io.on("reconnect_failed", () => {
+      console.error("Reconnection failed");
+      setConnectionError("Failed to reconnect. Please refresh the page.");
+      setIsReconnecting(false);
     });
 
     // Cleanup on unmount
@@ -57,5 +84,12 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
     socketRef.current?.off(event, callback);
   };
 
-  return { socket: socketRef.current, isConnected, on, off };
+  return {
+    socket: socketRef.current,
+    isConnected,
+    connectionError,
+    isReconnecting,
+    on,
+    off
+  };
 }

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -16,6 +16,7 @@ import { QueueSection } from "~/components/draft/QueueSection";
 import { AvailableParticipantsSection } from "~/components/draft/AvailableParticipantsSection";
 import { SidebarRecentPicks } from "~/components/draft/SidebarRecentPicks";
 import { DraftGridSection } from "~/components/draft/DraftGridSection";
+import { ConnectionOverlay } from "~/components/draft/ConnectionOverlay";
 import { calculateDraftEligibility, getEligibilitySummary } from "~/lib/draft-eligibility";
 import { toast } from "sonner";
 
@@ -196,7 +197,7 @@ export default function DraftRoom() {
     userAutodraftSettings,
     isCommissioner,
   } = useLoaderData<typeof loader>();
-  const { isConnected, on, off } = useDraftSocket(season.id, userTeam?.id);
+  const { isConnected, connectionError, isReconnecting, on, off } = useDraftSocket(season.id, userTeam?.id);
   const [picks, setPicks] = useState(draftPicks);
   const [currentPick, setCurrentPick] = useState(season.currentPickNumber || 1);
   const [searchQuery, setSearchQuery] = useState("");
@@ -1099,6 +1100,13 @@ export default function DraftRoom() {
           </Card>
         </div>
       )}
+
+      {/* Connection Overlay - blocks interaction until socket connects */}
+      <ConnectionOverlay
+        isConnected={isConnected}
+        isReconnecting={isReconnecting}
+        connectionError={connectionError}
+      />
     </div>
   );
 }