add skeleton to launch netbird ui at login and own context

client/ui/frontend/src/components/switches/FancyToggleSwitch.tsx

@@ -11,6 +11,7 @@ interface Props {
     label?: React.ReactNode;
     children?: React.ReactNode;
     disabled?: boolean;
+    loading?: boolean;
     dataCy?: string;
     className?: string;
     labelClassName?: string;
@@ -24,11 +25,52 @@ export default function FancyToggleSwitch({
     label,
     children,
     disabled = false,
+    loading = false,
     dataCy,
     className,
     labelClassName,
     textWrapperClassName = "max-w-lg",
 }: Readonly<Props>) {
+    if (loading) {
+        // Match the global SkeletonTheme in app.tsx (#25282d base /
+        // #33373e highlight) so the loading row blends in with
+        // SettingsSkeleton. box-decoration-clone gives every wrapped line
+        // of text its own rounded corners instead of just the first/last.
+        const shimmer =
+            "text-transparent select-none rounded bg-[#25282d] box-decoration-clone animate-pulse";
+        return (
+            <div
+                className={cn("inline-block text-left w-full", className)}
+                aria-busy
+            >
+                <div className={"flex justify-between gap-10"}>
+                    <div className={cn(textWrapperClassName)}>
+                        <Label className={labelClassName}>
+                            <span className={shimmer}>{label}</span>
+                        </Label>
+                        <HelpText margin={false}>
+                            <span
+                                className={cn(
+                                    shimmer,
+                                    "text-[0.6rem] leading-relaxed",
+                                )}
+                            >
+                                {helpText}
+                            </span>
+                        </HelpText>
+                    </div>
+                    <div className={"mt-2 pr-1"}>
+                        <div
+                            className={
+                                "h-[24px] w-[44px] rounded-full bg-[#25282d] animate-pulse"
+                            }
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
     const handleToggle = () => {
         if (disabled) return;
         onChange(!value);