From f14c3ce15e7568e9e8816b3d9e1a0479d67774ca Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Tue, 6 Jan 2026 10:07:42 +0800
Subject: [PATCH] fix: system model selector loading state flash (#30572)

---
 .../model-provider-page/index.tsx              | 18 ++++++++++++------
 .../system-model-selector/index.tsx            | 11 ++++++++---
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/index.tsx b/web/app/components/header/account-setting/model-provider-page/index.tsx
index f456bcaaa6..d3daaee859 100644
--- a/web/app/components/header/account-setting/model-provider-page/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/index.tsx
@@ -31,14 +31,19 @@ const FixedModelProvider = ['langgenius/openai/openai', 'langgenius/anthropic/an
 const ModelProviderPage = ({ searchText }: Props) => {
   const debouncedSearchText = useDebounce(searchText, { wait: 500 })
   const { t } = useTranslation()
-  const { data: textGenerationDefaultModel } = useDefaultModel(ModelTypeEnum.textGeneration)
-  const { data: embeddingsDefaultModel } = useDefaultModel(ModelTypeEnum.textEmbedding)
-  const { data: rerankDefaultModel } = useDefaultModel(ModelTypeEnum.rerank)
-  const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
-  const { data: ttsDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
+  const { data: textGenerationDefaultModel, isLoading: isTextGenerationDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textGeneration)
+  const { data: embeddingsDefaultModel, isLoading: isEmbeddingsDefaultModelLoading } = useDefaultModel(ModelTypeEnum.textEmbedding)
+  const { data: rerankDefaultModel, isLoading: isRerankDefaultModelLoading } = useDefaultModel(ModelTypeEnum.rerank)
+  const { data: speech2textDefaultModel, isLoading: isSpeech2textDefaultModelLoading } = useDefaultModel(ModelTypeEnum.speech2text)
+  const { data: ttsDefaultModel, isLoading: isTTSDefaultModelLoading } = useDefaultModel(ModelTypeEnum.tts)
   const { modelProviders: providers } = useProviderContext()
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
-  const defaultModelNotConfigured = !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
+  const isDefaultModelLoading = isTextGenerationDefaultModelLoading
+    || isEmbeddingsDefaultModelLoading
+    || isRerankDefaultModelLoading
+    || isSpeech2textDefaultModelLoading
+    || isTTSDefaultModelLoading
+  const defaultModelNotConfigured = !isDefaultModelLoading && !textGenerationDefaultModel && !embeddingsDefaultModel && !speech2textDefaultModel && !rerankDefaultModel && !ttsDefaultModel
   const [configuredProviders, notConfiguredProviders] = useMemo(() => {
     const configuredProviders: ModelProvider[] = []
     const notConfiguredProviders: ModelProvider[] = []
@@ -106,6 +111,7 @@ const ModelProviderPage = ({ searchText }: Props) => {
             rerankDefaultModel={rerankDefaultModel}
             speech2textDefaultModel={speech2textDefaultModel}
             ttsDefaultModel={ttsDefaultModel}
+            isLoading={isDefaultModelLoading}
           />
         </div>
       </div>
diff --git a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
index 74222ed56d..29c71e04fc 100644
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@@ -3,7 +3,7 @@ import type {
   DefaultModel,
   DefaultModelResponse,
 } from '../declarations'
-import { RiEqualizer2Line } from '@remixicon/react'
+import { RiEqualizer2Line, RiLoader2Line } from '@remixicon/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -32,6 +32,7 @@ type SystemModelSelectorProps = {
   speech2textDefaultModel: DefaultModelResponse | undefined
   ttsDefaultModel: DefaultModelResponse | undefined
   notConfigured: boolean
+  isLoading?: boolean
 }
 const SystemModel: FC<SystemModelSelectorProps> = ({
   textGenerationDefaultModel,
@@ -40,6 +41,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
   speech2textDefaultModel,
   ttsDefaultModel,
   notConfigured,
+  isLoading,
 }) => {
   const { t } = useTranslation()
   const { notify } = useToastContext()
@@ -129,13 +131,16 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
         crossAxis: 8,
       }}
     >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+      <PortalToFollowElemTrigger asChild onClick={() => setOpen(v => !v)}>
         <Button
           className="relative"
           variant={notConfigured ? 'primary' : 'secondary'}
           size="small"
+          disabled={isLoading}
         >
-          <RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />
+          {isLoading
+            ? <RiLoader2Line className="mr-1 h-3.5 w-3.5 animate-spin" />
+            : <RiEqualizer2Line className="mr-1 h-3.5 w-3.5" />}
           {t('modelProvider.systemModelSettings', { ns: 'common' })}
         </Button>
       </PortalToFollowElemTrigger>