minor visual enhancements

src/app/[orgId]/settings/sites/CreateSiteForm.tsx

@@ -41,6 +41,7 @@ import Link from "next/link";
 import {
     ArrowUpRight,
     ChevronsUpDown,
+    Loader2,
     SquareArrowOutUpRight
 } from "lucide-react";
 import {
@@ -48,6 +49,7 @@ import {
     CollapsibleContent,
     CollapsibleTrigger
 } from "@app/components/ui/collapsible";
+import LoaderPlaceholder from "@app/components/PlaceHolderLoader";
 
 const createSiteFormSchema = z.object({
     name: z
@@ -97,6 +99,8 @@ export default function CreateSiteForm({
     const [siteDefaults, setSiteDefaults] =
         useState<PickSiteDefaultsResponse | null>(null);
 
+    const [loadingPage, setLoadingPage] = useState(true);
+
     const handleCheckboxChange = (checked: boolean) => {
         // setChecked?.(checked);
         setIsChecked(checked);
@@ -121,27 +125,35 @@ export default function CreateSiteForm({
     useEffect(() => {
         if (!open) return;
 
-        // reset all values
-        setLoading?.(false);
-        setIsLoading(false);
-        form.reset();
-        setChecked?.(false);
-        setKeypair(null);
-        setSiteDefaults(null);
+        const load = async () => {
+            setLoadingPage(true);
+            // reset all values
+            setLoading?.(false);
+            setIsLoading(false);
+            form.reset();
+            setChecked?.(false);
+            setKeypair(null);
+            setSiteDefaults(null);
 
-        const generatedKeypair = generateKeypair();
-        setKeypair(generatedKeypair);
+            const generatedKeypair = generateKeypair();
+            setKeypair(generatedKeypair);
 
-        api.get(`/org/${orgId}/pick-site-defaults`)
-            .catch((e) => {
-                // update the default value of the form to be local method
-                form.setValue("method", "local");
-            })
-            .then((res) => {
-                if (res && res.status === 200) {
-                    setSiteDefaults(res.data.data);
-                }
-            });
+            await api
+                .get(`/org/${orgId}/pick-site-defaults`)
+                .catch((e) => {
+                    // update the default value of the form to be local method
+                    form.setValue("method", "local");
+                })
+                .then((res) => {
+                    if (res && res.status === 200) {
+                        setSiteDefaults(res.data.data);
+                    }
+                });
+
+            setLoadingPage(false);
+        };
+
+        load();
     }, [open]);
 
     async function onSubmit(data: CreateSiteFormValues) {
@@ -257,7 +269,9 @@ PersistentKeepalive = 5`
 
     const newtConfigDockerRun = `docker run -it fosrl/newt --id ${siteDefaults?.newtId} --secret ${siteDefaults?.newtSecret} --endpoint ${env.app.dashboardUrl}`;
 
-    return (
+    return loadingPage ? (
+        <LoaderPlaceholder height="300px"/>
+    ) : (
         <div className="space-y-4">
             <Form {...form}>
                 <form
@@ -276,8 +290,7 @@ PersistentKeepalive = 5`
                                 </FormControl>
                                 <FormMessage />
                                 <FormDescription>
-                                    This is the the display name for the
-                                    site.
+                                    This is the the display name for the site.
                                 </FormDescription>
                             </FormItem>
                         )}

src/app/[orgId]/settings/sites/CreateSiteModal.tsx

@@ -58,6 +58,9 @@ export default function CreateSiteFormModal({
                         </div>
                     </CredenzaBody>
                     <CredenzaFooter>
+                        <CredenzaClose asChild>
+                            <Button variant="outline">Close</Button>
+                        </CredenzaClose>
                         <Button
                             type="submit"
                             form="create-site-form"
@@ -69,9 +72,6 @@ export default function CreateSiteFormModal({
                         >
                             Create Site
                         </Button>
-                        <CredenzaClose asChild>
-                            <Button variant="outline">Close</Button>
-                        </CredenzaClose>
                     </CredenzaFooter>
                 </CredenzaContent>
             </Credenza>

src/app/[orgId]/settings/sites/SitesTable.tsx

@@ -268,7 +268,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                         <Link
                             href={`/${siteRow.orgId}/settings/sites/${siteRow.nice}`}
                         >
-                            <Button variant={"outline"} className="ml-2">
+                            <Button variant={"outlinePrimary"} className="ml-2">
                                 Edit
                                 <ArrowRight className="ml-2 w-4 h-4" />
                             </Button>

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -68,7 +68,7 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
 
             <SiteProvider site={site}>
                 <SidebarSettings sidebarNavItems={sidebarNavItems}>
-                    <div className="mb-8">
+                    <div className="mb-4">
                         <SiteInfoCard />
                     </div>
                     {children}