general form

TabbyML · Mar 20, 2024 · e3830cb · e3830cb
1 parent e3cfe5d
commit e3830cb
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 11 deletions.
diff --git a/ee/tabby-ui/app/(dashboard)/settings/general/components/network-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/general/components/network-form.tsx
@@ -21,6 +21,7 @@ import {
   FormMessage
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
+import LoadingWrapper from '@/components/loading-wrapper'
 import { FormSkeleton } from '@/components/skeleton'
 
 const updateNetworkSettingMutation = graphql(/* GraphQL */ `
@@ -114,9 +115,14 @@ export const GeneralNetworkForm = () => {
     reexecuteQuery()
   }
 
-  return data && !stale ? (
-    <NetworkForm defaultValues={data.networkSetting} onSuccess={onSuccess} />
-  ) : (
-    <FormSkeleton />
+  return (
+    <div className="min-h-[160px]">
+      <LoadingWrapper loading={!data || stale} fallback={<FormSkeleton />}>
+        <NetworkForm
+          defaultValues={data?.networkSetting}
+          onSuccess={onSuccess}
+        />
+      </LoadingWrapper>
+    </div>
   )
 }
diff --git a/ee/tabby-ui/app/(dashboard)/settings/general/components/security-form.tsx b/ee/tabby-ui/app/(dashboard)/settings/general/components/security-form.tsx
@@ -26,8 +26,8 @@ import {
 import { IconTrash } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 import { LicenseGuard } from '@/components/license-guard'
-import { FormSkeleton } from '@/components/skeleton'
 import LoadingWrapper from '@/components/loading-wrapper'
+import { FormSkeleton } from '@/components/skeleton'
 
 const updateSecuritySettingMutation = graphql(/* GraphQL */ `
   mutation updateSecuritySetting($input: SecuritySettingInput!) {
@@ -228,7 +228,7 @@ function buildListValuesFromField(fieldListValue?: Array<{ value: string }>) {
 }
 
 export const GeneralSecurityForm = () => {
-  const [{ data, stale }, reexecuteQuery] = useQuery({
+  const [{ data, stale, fetching }, reexecuteQuery] = useQuery({
     query: securitySetting
   })
   const onSuccess = () => {
@@ -241,8 +241,9 @@ export const GeneralSecurityForm = () => {
       data.securitySetting.allowedRegisterDomainList
     )
   }
+
   return (
-    <LoadingWrapper loading={!!data && !stale} fallback={<FormSkeleton />}>
+    <LoadingWrapper loading={fetching || stale} fallback={<FormSkeleton />}>
       <SecurityForm defaultValues={defaultValues} onSuccess={onSuccess} />
     </LoadingWrapper>
   )

diff --git a/ee/tabby-ui/components/skeleton.tsx b/ee/tabby-ui/components/skeleton.tsx
@@ -1,10 +1,17 @@
 'use client'
 
+import { HTMLAttributes } from 'react'
+
+import { cn } from '@/lib/utils'
+
 import { Skeleton } from './ui/skeleton'
 
-export const ListSkeleton = () => {
+export const ListSkeleton: React.FC<HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => {
   return (
-    <div className="space-y-3">
+    <div className={cn('space-y-3', className)} {...props}>
       <Skeleton className="h-4 w-full" />
       <Skeleton className="h-4 w-full" />
       <Skeleton className="h-4 w-full" />
@@ -13,9 +20,12 @@ export const ListSkeleton = () => {
   )
 }
 
-export const FormSkeleton = () => {
+export const FormSkeleton: React.FC<HTMLAttributes<HTMLDivElement>> = ({
+  className,
+  ...props
+}) => {
   return (
-    <div className="flex flex-col gap-3">
+    <div className={cn('flex flex-col gap-3', className)} {...props}>
       <Skeleton className="h-4 w-[20%]" />
       <Skeleton className="h-4 w-full" />
       <Skeleton className="h-4 w-[20%]" />