mirror of
https://github.com/netbirdio/netbird.git
synced 2026-07-23 00:41:29 +02:00
add ready prop to autosize hook
This commit is contained in:
@@ -22,7 +22,16 @@ import i18next from "@/lib/i18n";
|
||||
// the observer can settle on a stale size before React's commit and the
|
||||
// font's glyph metrics finish updating. An explicit double-rAF after the
|
||||
// language flip guarantees the final layout is the one we measure.
|
||||
export function useAutoSizeWindow<T extends HTMLElement>(width: number) {
|
||||
//
|
||||
// `ready` (default true) gates Window.SetSize + Window.Show. Pass false
|
||||
// while the caller is still resolving its initial content (e.g. waiting
|
||||
// on an async probe) so the window stays Hidden instead of briefly
|
||||
// rendering placeholder padding at the wrong size — Linux/GNOME in
|
||||
// particular paints whatever the frame ends up at, and a transient
|
||||
// half-height frame can leak through. Flip ready=true once the real
|
||||
// content is in the DOM; the effect re-runs, measures the final size,
|
||||
// and shows the window.
|
||||
export function useAutoSizeWindow<T extends HTMLElement>(width: number, ready: boolean = true) {
|
||||
const ref = useRef<T | null>(null);
|
||||
useLayoutEffect(() => {
|
||||
const el = ref.current;
|
||||
@@ -31,6 +40,7 @@ export function useAutoSizeWindow<T extends HTMLElement>(width: number) {
|
||||
let raf1 = 0;
|
||||
let raf2 = 0;
|
||||
const apply = () => {
|
||||
if (!ready) return;
|
||||
const h = Math.ceil(el.getBoundingClientRect().height);
|
||||
if (h <= 0) return;
|
||||
// Wails Window.SetSize takes the *frame* size on every platform
|
||||
@@ -79,6 +89,6 @@ export function useAutoSizeWindow<T extends HTMLElement>(width: number) {
|
||||
cancelAnimationFrame(raf2);
|
||||
i18next.off("languageChanged", scheduleApply);
|
||||
};
|
||||
}, [width]);
|
||||
}, [width, ready]);
|
||||
return ref;
|
||||
}
|
||||
|
||||
@@ -51,10 +51,13 @@ type InitialState = {
|
||||
};
|
||||
|
||||
export default function WelcomeDialog() {
|
||||
const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH);
|
||||
const [step, setStep] = useState<WelcomeStep>("tray");
|
||||
const [initial, setInitial] = useState<InitialState | null>(null);
|
||||
const [closing, setClosing] = useState(false);
|
||||
// ready=false until the daemon probe resolves — keeps the window
|
||||
// Hidden so neither the empty padding-only frame (Linux/GNOME paints
|
||||
// through) nor a placeholder div leaks onto screen.
|
||||
const contentRef = useAutoSizeWindow<HTMLDivElement>(WINDOW_WIDTH, initial !== null);
|
||||
|
||||
// Probe daemon state on mount: who's the active profile, do they
|
||||
// have an email recorded, and what management URL is configured?
|
||||
@@ -171,11 +174,7 @@ export default function WelcomeDialog() {
|
||||
|
||||
const content = useMemo(() => {
|
||||
if (!initial) {
|
||||
// Probe in flight — render an empty container so the dialog
|
||||
// window measures something tiny instead of flashing the
|
||||
// tray step before we know whether step 2 applies. The probe
|
||||
// completes within a single tick on a healthy daemon.
|
||||
return <div className={"h-32"} />;
|
||||
return null;
|
||||
}
|
||||
switch (step) {
|
||||
case "tray":
|
||||
|
||||
Reference in New Issue
Block a user