fix: apikey input flickering

src/renderer/src/pages/settings/ProviderSettings/ProviderSetting.tsx

@@ -14,8 +14,8 @@ import { formatApiHost } from '@renderer/utils/api'
 import { providerCharge } from '@renderer/utils/oauth'
 import { Button, Divider, Flex, Input, Space, Switch, Tooltip } from 'antd'
 import Link from 'antd/es/typography/Link'
-import { isEmpty } from 'lodash'
-import { FC, useEffect, useState } from 'react'
+import { debounce, isEmpty } from 'lodash'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
@@ -54,6 +54,7 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   const { updateProvider, models } = useProvider(provider.id)
   const { t } = useTranslation()
   const { theme } = useTheme()
+  const [inputValue, setInputValue] = useState(apiKey)
 
   const isAzureOpenAI = provider.id === 'azure-openai' || provider.type === 'azure-openai'
 
@@ -65,6 +66,14 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
   const [modelStatuses, setModelStatuses] = useState<ModelStatus[]>([])
   const [isHealthChecking, setIsHealthChecking] = useState(false)
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedSetApiKey = useCallback(
+    debounce((value) => {
+      setApiKey(formatApiKeys(value))
+    }, 100),
+    []
+  )
+
   const onUpdateApiKey = () => {
     if (apiKey !== provider.apiKey) {
       updateProvider({ ...provider, apiKey })
@@ -286,12 +295,19 @@ const ProviderSetting: FC<Props> = ({ provider: _provider }) => {
       <SettingSubtitle style={{ marginTop: 5 }}>{t('settings.provider.api_key')}</SettingSubtitle>
       <Space.Compact style={{ width: '100%', marginTop: 5 }}>
         <Input.Password
-          value={apiKey}
+          value={inputValue}
           placeholder={t('settings.provider.api_key')}
-          onChange={(e) => setApiKey(formatApiKeys(e.target.value))}
-          onBlur={onUpdateApiKey}
+          onChange={(e) => {
+            setInputValue(e.target.value)
+            debouncedSetApiKey(e.target.value)
+          }}
+          onBlur={() => {
+            const formattedValue = formatApiKeys(inputValue)
+            setInputValue(formattedValue)
+            setApiKey(formattedValue)
+            onUpdateApiKey()
+          }}
           spellCheck={false}
-          type="password"
           autoFocus={provider.enabled && apiKey === ''}
           disabled={provider.id === 'copilot'}
         />