f6fe3815cb
useMediaQuery initialized to false and updated in useEffect, causing a paint where isMobile was false on mobile devices. This rendered the desktop layout first, hiding the queue tab until the effect fired. useSyncExternalStore reads matchMedia synchronously on the client so the correct layout is used on the first render with no extra paint. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
13 lines
381 B
TypeScript
13 lines
381 B
TypeScript
import { useSyncExternalStore } from "react";
|
|
|
|
export function useMediaQuery(query: string): boolean {
|
|
return useSyncExternalStore(
|
|
(callback) => {
|
|
const mq = window.matchMedia(query);
|
|
mq.addEventListener("change", callback);
|
|
return () => mq.removeEventListener("change", callback);
|
|
},
|
|
() => window.matchMedia(query).matches,
|
|
() => false
|
|
);
|
|
}
|