update

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

@@ -3,10 +3,8 @@
 import React from 'react'
 import { OperationResult } from 'urql'
 
-import { SKELETON_DELAY } from '@/lib/constants'
 import { graphql } from '@/lib/gql/generates'
 import { EmailSettingQuery } from '@/lib/gql/generates/graphql'
-import { useDebounceValue } from '@/lib/hooks/use-debounce'
 import { client } from '@/lib/tabby/gql'
 import { ListSkeleton } from '@/components/skeleton'
 
@@ -34,9 +32,6 @@ export const Mail = () => {
   const [queryResult, setQueryResult] =
     React.useState<OperationResult<EmailSettingQuery, any>>()
   const [initialized, setInitialized] = React.useState(false)
-  const [debouncedInitialzed] = useDebounceValue(initialized, SKELETON_DELAY, {
-    leading: true
-  })
   const mailFormRef = React.useRef<MailFormRef>(null)
 
   const queryEmailSettings = () => {
@@ -85,7 +80,7 @@ export const Mail = () => {
   return (
     <>
       <MailDeliveryHeader />
-      {debouncedInitialzed ? (
+      {initialized ? (
         <div>
           <div className="mb-8 border-b pb-4">
             <MailForm

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

@@ -7,9 +7,7 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import * as z from 'zod'
 
-import { SKELETON_DELAY } from '@/lib/constants'
 import { graphql } from '@/lib/gql/generates'
-import { useDebounceValue } from '@/lib/hooks/use-debounce'
 import { useNetworkSetting } from '@/lib/hooks/use-network-setting'
 import { useMutation } from '@/lib/tabby/gql'
 import { Button } from '@/components/ui/button'
@@ -44,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
@@ -115,25 +107,16 @@ const NetworkForm: React.FC<NetworkFormProps> = ({
 }
 
 export const GeneralNetworkForm = () => {
-  const [queryState, reexecuteQuery] = useNetworkSetting({
+  const [{ data, stale }, reexecuteQuery] = useNetworkSetting({
     requestPolicy: 'network-only'
   })
 
-  const { data, fetching, stale } = queryState
-
-  // Use `useDebounceValue` to avoid flicker
-  const [shouldInitializeForm] = useDebounceValue(
-    // Combine three variables to determine and ensure not to use cache.
-    data && !stale && !fetching,
-    SKELETON_DELAY
-  )
-
   const onSuccess = () => {
     toast.success('Network configuration is updated')
     reexecuteQuery()
   }
 
-  return shouldInitializeForm && data ? (
+  return data && !stale ? (
     <NetworkForm defaultValues={data.networkSetting} onSuccess={onSuccess} />
   ) : (
     <FormSkeleton />

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

@@ -8,10 +8,8 @@ import { toast } from 'sonner'
 import { useQuery } from 'urql'
 import * as z from 'zod'
 
-import { SKELETON_DELAY } from '@/lib/constants'
 import { graphql } from '@/lib/gql/generates'
 import { LicenseType } from '@/lib/gql/generates/graphql'
-import { useDebounceValue } from '@/lib/hooks/use-debounce'
 import { useMutation } from '@/lib/tabby/gql'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
@@ -244,9 +242,7 @@ export const GeneralSecurityForm = () => {
     )
   }
 
-  const [shouldInitializeForm] = useDebounceValue(!!data, SKELETON_DELAY)
-
-  return shouldInitializeForm ? (
+  return data ? (
     <SecurityForm defaultValues={defaultValues} onSuccess={onSuccess} />
   ) : (
     <FormSkeleton />

ee/tabby-ui/lib/constants/index.ts

@@ -1,5 +1,3 @@
 export const PLACEHOLDER_EMAIL_FORM = '[email protected]'
 
 export const DEFAULT_PAGE_SIZE = 20
-
-export const SKELETON_DELAY = 300