prevent content flash in settings

client/ui/frontend/src/modules/profiles/ProfileDropdown.tsx

@@ -4,10 +4,9 @@ import { Dialogs } from "@wailsio/runtime";
 import * as Popover from "@radix-ui/react-popover";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { Command } from "cmdk";
-import { Check, ChevronDown, PlusCircle, Settings2, UserCircle } from "lucide-react";
+import { Check, ChevronDown, Settings2, UserCircle } from "lucide-react";
 import { pickProfileIcon } from "@/modules/profiles/ProfileAvatar";
 import type { Profile } from "@bindings/services/models.js";
-import { ProfileCreationModal } from "@/modules/profiles/ProfileCreationModal";
 import { Tooltip } from "@/components/Tooltip";
 import { useProfile } from "@/contexts/ProfileContext";
 import { cn } from "@/lib/cn";
@@ -17,14 +16,12 @@ type ProfileDropdownProps = {
     onManageProfiles?: () => void;
 };
 
-const ADD_VALUE = "__add_profile__";
 const MANAGE_VALUE = "__manage_profiles__";
 
 export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
     const { t } = useTranslation();
-    const { activeProfile, profiles, addProfile, switchProfile } = useProfile();
+    const { activeProfile, profiles, switchProfile } = useProfile();
     const [open, setOpen] = useState(false);
-    const [newProfileOpen, setNewProfileOpen] = useState(false);
     const [busy, setBusy] = useState(false);
 
     const sortedProfiles = [...profiles].sort((a, b) => {
@@ -54,28 +51,11 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
         void guarded(t("profile.error.switchTitle"), () => switchProfile(name));
     };
 
-    const handleAdd = () => {
-        setOpen(false);
-        setNewProfileOpen(true);
-    };
-
     const handleManage = () => {
         setOpen(false);
         onManageProfiles?.();
     };
 
-    const handleCreateProfile = async (name: string) => {
-        try {
-            await addProfile(name);
-            await switchProfile(name);
-        } catch (e) {
-            await Dialogs.Error({
-                Title: t("profile.error.createTitle"),
-                Message: formatErrorMessage(e),
-            });
-        }
-    };
-
     const displayName = activeProfile || t("profile.selector.loading");
 
     return (
@@ -130,20 +110,6 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
                             )}
 
                             <div className={"pt-1"}>
-                                <Command.Item
-                                    value={ADD_VALUE}
-                                    onSelect={handleAdd}
-                                    className={cn(
-                                        "flex items-center gap-2 px-2 py-1.5 my-0.5",
-                                        "rounded-md outline-none cursor-default text-sm",
-                                        "data-[selected=true]:bg-nb-gray-900",
-                                    )}
-                                >
-                                    <PlusCircle size={14} className="shrink-0" />
-                                    <span className="truncate flex-1">
-                                        {t("profile.dropdown.addProfile")}
-                                    </span>
-                                </Command.Item>
                                 <Command.Item
                                     value={MANAGE_VALUE}
                                     onSelect={handleManage}
@@ -165,11 +131,6 @@ export const ProfileDropdown = ({ onManageProfiles }: ProfileDropdownProps) => {
                     </Popover.Content>
                 </Popover.Portal>
             </Popover.Root>
-            <ProfileCreationModal
-                open={newProfileOpen}
-                onOpenChange={setNewProfileOpen}
-                onCreate={handleCreateProfile}
-            />
         </>
     );
 };

client/ui/frontend/src/modules/settings/SettingsPage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { useLocation, useSearchParams } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { Events } from "@wailsio/runtime";
 import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { cn } from "@/lib/cn";
 import { AppRightPanel } from "@/layouts/AppRightPanel.tsx";
@@ -15,11 +16,18 @@ import { SettingsAdvanced } from "@/modules/settings/SettingsAdvanced.tsx";
 import { SettingsTroubleshooting } from "@/modules/settings/SettingsTroubleshooting.tsx";
 import { SettingsAbout } from "@/modules/settings/SettingsAbout.tsx";
 
-// The settings window opens at General by default. Navigation state (e.g. the
-// update-available header trigger jumps to About) or a `?tab=` query param
-// in the window's start URL (e.g. WindowManager.OpenSettings("profiles") from
-// the profile dropdown) override the default. No persistence across opens —
-// a user who wants to revisit a deep tab gets there in two clicks.
+const EVENT_SETTINGS_OPEN = "netbird:settings:open";
+
+// The settings window mounts once at app startup (hidden) and stays at the
+// single URL `/#/settings` forever — no SetURL between opens, so the
+// `AppLayout` provider stack never re-mounts and we never see the
+// `SettingsSkeleton` flash mid-reload. Tab is local state, driven by:
+//   - the `netbird:settings:open` Wails event from `WindowManager.OpenSettings`
+//     (sets the target tab, then Go calls `Show`/`Focus`); and
+//   - the same event with payload `"general"` from the close hook, so the
+//     window is already on General the next time Show fires (common case).
+// In-window navigation state (e.g. the update-available header jump to About)
+// still wins for that one render.
 //
 // The `h-12` draggable strip at the top accounts for the macOS
 // `MacTitleBarHiddenInset` setting in services/windowmanager.go (traffic-light
@@ -27,17 +35,19 @@ import { SettingsAbout } from "@/modules/settings/SettingsAbout.tsx";
 // Header height so AppRightPanel ends up the same height in both windows.
 export const SettingsPage = () => {
     const location = useLocation();
-    const [searchParams] = useSearchParams();
-    const queryTab = searchParams.get("tab");
     const navState = location.state as { tab?: string } | null;
-    const [active, setActive] = useState(
-        () => navState?.tab ?? queryTab ?? "general",
-    );
+    const [active, setActive] = useState(() => navState?.tab ?? "general");
 
     useEffect(() => {
         if (navState?.tab) setActive(navState.tab);
     }, [navState?.tab, location.key]);
 
+    useEffect(() => {
+        return Events.On(EVENT_SETTINGS_OPEN, (e: { data: string }) => {
+            setActive(e.data || "general");
+        });
+    }, []);
+
     return (
         <>
             <div

client/ui/services/windowmanager.go

@@ -21,6 +21,13 @@ const EventTriggerLogin = "trigger-login"
 // and tears down the daemon's pending SSO wait.
 const EventBrowserLoginCancel = "browser-login:cancel"
 
+// EventSettingsOpen tells the (already-mounted, currently-hidden) settings
+// window which tab to land on, then drives Window.Show()/Focus() from the
+// React side. Routing the open through the React layer avoids the
+// SetURL-on-every-open path that re-mounted the entire provider tree and
+// flashed the SettingsSkeleton between opens.
+const EventSettingsOpen = "netbird:settings:open"
+
 // WindowManager opens auxiliary application windows on demand from the
 // frontend. The main window is created up-front in main.go; this service is
 // for secondary surfaces (Settings, BrowserLogin, Session*, InstallProgress).
@@ -82,25 +89,34 @@ func NewWindowManager(app *application.App, mainWindow *application.WebviewWindo
 		},
 	})
 	// Hide on close instead of destroying — preserves in-window React state
-	// across reopens. Mirrors the main window's close behaviour.
+	// across reopens. Mirrors the main window's close behaviour. Resetting
+	// the active tab to General on hide means the *next* OpenSettings("")
+	// finds the window already on General, so showing it is a single Show()
+	// with nothing to update first — no flash.
 	s.settings.RegisterHook(events.Common.WindowClosing, func(e *application.WindowEvent) {
 		e.Cancel()
+		s.app.Event.Emit(EventSettingsOpen, "general")
 		s.settings.Hide()
 	})
 	return s
 }
 
-// OpenSettings shows the settings window (created hidden at startup). If
-// `tab` is non-empty the settings React layer reads it from the start URL
-// and selects that tab (e.g. "profiles") instead of whatever tab was active
-// when the user last closed the window. Passing an empty tab keeps the
-// existing in-window state.
+// OpenSettings asks the (already-mounted, currently-hidden) settings window
+// to land on `tab` and bring itself to front. Empty `tab` lands on General.
+//
+// The window stays at a single URL (`/#/settings`) for its entire lifetime:
+// calling SetURL on every open re-loaded the WKWebView, which re-mounted the
+// `AppLayout` provider stack and visibly flashed the `SettingsSkeleton` while
+// `SettingsContext` re-fetched config. Instead, the React side keeps tab in
+// local state and listens for `EventSettingsOpen` to switch it. The close
+// hook (above) already resets state to "general", so the common-case
+// reopen-on-gear path has nothing to update — Show is a no-op repaint.
 func (s *WindowManager) OpenSettings(tab string) {
-	s.mu.Lock()
-	defer s.mu.Unlock()
-	if tab != "" {
-		s.settings.SetURL("/#/settings?tab=" + url.QueryEscape(tab))
+	target := tab
+	if target == "" {
+		target = "general"
 	}
+	s.app.Event.Emit(EventSettingsOpen, target)
 	s.settings.Show()
 	s.settings.Focus()
 }