fix(ui): initialize the form with the latest values (#1679)

* refactor: form skeleton

* update

* update

* rename

* update

* update

* [autofix.ci] apply automated fixes

* cmts

* update

* cache-and-network

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

ee/tabby-ui/app/(dashboard)/settings/general/components/general.tsx

@@ -3,23 +3,12 @@
 import React from 'react'
 
 import { Separator } from '@/components/ui/separator'
-import { ListSkeleton } from '@/components/skeleton'
 
 import { GeneralFormSection } from './form-section'
 import { GeneralNetworkForm } from './network-form'
 import { GeneralSecurityForm } from './security-form'
 
 export default function General() {
-  const [initialized, setInitialized] = React.useState(false)
-
-  React.useEffect(() => {
-    setTimeout(() => {
-      setInitialized(true)
-    }, 500)
-  }, [])
-
-  if (!initialized) return <ListSkeleton />
-
   return (
     <div className="flex flex-col gap-4">
       <GeneralFormSection title="Network">

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 { FormSkeleton } from '@/components/skeleton'
 
 const updateNetworkSettingMutation = graphql(/* GraphQL */ `
   mutation updateNetworkSettingMutation($input: NetworkSettingInput!) {
@@ -41,14 +42,8 @@ interface NetworkFormProps {
 
 const NetworkForm: React.FC<NetworkFormProps> = ({
   onSuccess,
-  defaultValues: propsDefaultValues
+  defaultValues
 }) => {
-  const defaultValues = React.useMemo(() => {
-    return {
-      ...(propsDefaultValues || {})
-    }
-  }, [propsDefaultValues])
-
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues
@@ -112,15 +107,16 @@ const NetworkForm: React.FC<NetworkFormProps> = ({
 }
 
 export const GeneralNetworkForm = () => {
-  const [{ data }, reexecuteQuery] = useNetworkSetting()
+  const [{ data, stale }, reexecuteQuery] = useNetworkSetting()
+
   const onSuccess = () => {
     toast.success('Network configuration is updated')
     reexecuteQuery()
   }
 
-  return (
-    data && (
-      <NetworkForm defaultValues={data.networkSetting} onSuccess={onSuccess} />
-    )
+  return data && !stale ? (
+    <NetworkForm defaultValues={data.networkSetting} onSuccess={onSuccess} />
+  ) : (
+    <FormSkeleton />
   )
 }

ee/tabby-ui/app/(dashboard)/settings/general/components/security-form.tsx

@@ -26,6 +26,7 @@ import {
 import { IconTrash } from '@/components/ui/icons'
 import { Input } from '@/components/ui/input'
 import { LicenseGuard } from '@/components/license-guard'
+import { FormSkeleton } from '@/components/skeleton'
 
 const updateSecuritySettingMutation = graphql(/* GraphQL */ `
   mutation updateSecuritySetting($input: SecuritySettingInput!) {
@@ -226,7 +227,9 @@ function buildListValuesFromField(fieldListValue?: Array<{ value: string }>) {
 }
 
 export const GeneralSecurityForm = () => {
-  const [{ data }, reexecuteQuery] = useQuery({ query: securitySetting })
+  const [{ data, stale }, reexecuteQuery] = useQuery({
+    query: securitySetting
+  })
   const onSuccess = () => {
     toast.success('Security configuration is updated')
     reexecuteQuery()
@@ -237,7 +240,10 @@ export const GeneralSecurityForm = () => {
       data.securitySetting.allowedRegisterDomainList
     )
   }
-  return (
-    data && <SecurityForm defaultValues={defaultValues} onSuccess={onSuccess} />
+
+  return data && !stale ? (
+    <SecurityForm defaultValues={defaultValues} onSuccess={onSuccess} />
+  ) : (
+    <FormSkeleton />
   )
 }

ee/tabby-ui/components/skeleton.tsx

@@ -12,3 +12,14 @@ export const ListSkeleton = () => {
     </div>
   )
 }
+
+export const FormSkeleton = () => {
+  return (
+    <div className="flex flex-col gap-3">
+      <Skeleton className="h-4 w-[20%]" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-[20%]" />
+      <Skeleton className="h-4 w-full" />
+    </div>
+  )
+}