chrisp/brackt
1
1
Fork 0
Code Issues 42 Pull requests Projects Releases Packages Wiki Activity Actions 2

Simplify reconnect handlers and fix connect_error overlay flicker

Browse source 
- Merge handleOnline and the shared branch of handleVisibilityChange into a
  single handleReturn function. visibilitychange is now a thin guard that calls
  it only on show. Both events share the same logic: reconnect if socket dropped,
  or restore UI state + rejoin room + revalidate if the socket survived.

- Remove setIsReconnecting(false) from connect_error: reconnect_attempt fires
  immediately after and resets it to true anyway, causing the "Reconnecting"
  overlay to flicker off and back on during every retry cycle.

https://claude.ai/code/session_016tCZVFjSeHdQsdKktbDHEt
This commit is contained in:
Claude 2026-02-25 17:31:54 +00:00
parent 96f02d2643
commit 80ab6a3650
No known key found for this signature in database
1 changed files with 20 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
app/hooks/useDraftSocket.ts
View file

@ -57,7 +57,8 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
socket.on("connect_error", (error) => {
console.error("Socket.IO connection error:", error);
setConnectionError(error.message || "Failed to connect to draft server");
setIsReconnecting(false);
// Don't clear isReconnecting here — reconnect_attempt fires immediately
// after and sets it back to true, causing a visible flicker in the overlay.
});
socket.io.on("reconnect_attempt", () => {
@ -75,48 +76,40 @@ export function useDraftSocket(seasonId: string, teamId?: string): UseDraftSocke
const handleOffline = () => {
// Mark as reconnecting immediately — the OS fires this before Socket.IO's
// heartbeat would detect the drop (~15s later). Note: "offline" can fire
// spuriously on mobile; handleOnline corrects the state if the socket is
// spuriously on mobile; handleReturn corrects the state if the socket is
// still alive when the network returns.
setIsConnected(false);
setIsReconnecting(true);
};
const handleOnline = () => {
if (socketRef.current?.connected) {
// Network blipped but the socket stayed alive (came back within ping timeout window).
// The socket never disconnected so no "connect" event will fire — correct UI directly.
// Unified handler for both "network returned" (online event) and
// "browser tab/app regained focus" (visibilitychange). Two cases:
// - Socket dropped: reconnect immediately, bypassing backoff.
// - Socket alive: restore UI state and rejoin the draft room so the page
// revalidates and picks up any events missed while the client was away.
const handleReturn = () => {
if (!socketRef.current?.connected) {
socketRef.current?.connect();
} else {
setIsConnected(true);
setIsReconnecting(false);
} else {
// Genuinely disconnected — skip backoff and reconnect immediately.
socketRef.current?.connect();
}
};
const handleVisibilityChange = () => {
if (document.visibilityState !== "visible") return;
if (!socketRef.current?.connected) {
// Mobile browsers kill WebSockets when the app is backgrounded without
// firing "offline". Reconnect immediately when the user returns.
socketRef.current?.connect();
} else {
// Socket appears connected but may have gone stale while JS was suspended.
// Rejoin the draft room (idempotent) and bump reconnectCount so the draft
// page revalidates loader data to catch any picks/state changes missed
// while the browser was backgrounded.
socketRef.current?.emit("join-draft", seasonId, teamId);
socketRef.current.emit("join-draft", seasonId, teamId);
setReconnectCount((c) => c + 1);
}
};
// visibilitychange fires on both hide and show — only act on show.
const handleVisibilityChange = () => {
if (document.visibilityState === "visible") handleReturn();
};
window.addEventListener("offline", handleOffline);
window.addEventListener("online", handleOnline);
window.addEventListener("online", handleReturn);
document.addEventListener("visibilitychange", handleVisibilityChange);
return () => {
window.removeEventListener("offline", handleOffline);
window.removeEventListener("online", handleOnline);
window.removeEventListener("online", handleReturn);
document.removeEventListener("visibilitychange", handleVisibilityChange);
console.log("Leaving draft room:", seasonId);
socket.emit("leave-draft", seasonId);