fix: no model selected but params keep loading (#36342)

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/__tests__/index.spec.tsx

@@ -13,6 +13,7 @@ let parameterRules: Array<Record<string, unknown>> | undefined = [
   },
 ]
 let isRulesLoading = false
+let isRulesPending = false
 let currentProvider: Record<string, unknown> | undefined = { provider: 'openai', label: { en_US: 'OpenAI' } }
 let currentModel: Record<string, unknown> | undefined = {
   model: 'gpt-3.5-turbo',
@@ -49,7 +50,7 @@ vi.mock('@/service/use-common', () => ({
       data: parameterRules,
     },
     isLoading: isRulesLoading,
-    isPending: isRulesLoading,
+    isPending: isRulesPending,
   }),
 }))
 
@@ -138,6 +139,7 @@ describe('ModelParameterModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     isRulesLoading = false
+    isRulesPending = false
     parameterRules = [
       {
         name: 'temperature',
@@ -252,11 +254,29 @@ describe('ModelParameterModal', () => {
 
   it('should render loading state when parameter rules are loading', () => {
     isRulesLoading = true
+    isRulesPending = true
     render(<ModelParameterModal {...defaultProps} />)
     fireEvent.click(screen.getByText('Open Settings'))
     expect(screen.getByRole('status')).toBeInTheDocument()
   })
 
+  it('should not render parameter loading when model is not configured and parameter rules query is pending but disabled', () => {
+    isRulesPending = true
+    parameterRules = []
+
+    render(
+      <ModelParameterModal
+        {...defaultProps}
+        provider=""
+        modelId=""
+      />,
+    )
+    fireEvent.click(screen.getByText('Open Settings'))
+
+    expect(screen.queryByRole('status')).not.toBeInTheDocument()
+    expect(screen.getByTestId('model-selector')).toBeInTheDocument()
+  })
+
   it('should not open content when readonly is true', () => {
     render(<ModelParameterModal {...defaultProps} readonly />)
     fireEvent.click(screen.getByText('Open Settings'))
@@ -332,6 +352,7 @@ describe('ModelParameterModal', () => {
   it('should render the empty loading fallback when rules resolve to an empty list', () => {
     parameterRules = []
     isRulesLoading = true
+    isRulesPending = true
 
     render(<ModelParameterModal {...defaultProps} />)
     fireEvent.click(screen.getByText('Open Settings'))

web/app/components/header/account-setting/model-provider-page/model-parameter-modal/index.tsx

@@ -76,10 +76,9 @@ const ModelParameterModal: FC<ModelParameterModalProps> = ({
   const settingsIconRef = useRef<HTMLDivElement>(null)
   const {
     data: parameterRulesData,
-    isPending,
     isLoading,
   } = useModelParameterRules(provider, modelId)
-  const isRulesLoading = isPending || isLoading
+  const isRulesLoading = !!provider && !!modelId && isLoading
   const {
     currentProvider,
     currentModel,

web/app/components/plugins/plugin-detail-panel/model-selector/__tests__/llm-params-panel.spec.tsx

@@ -192,10 +192,12 @@ const createDefaultProps = (overrides: Partial<{
 const setupModelParameterRulesMock = (config: {
   data?: ModelParameterRule[]
   isPending?: boolean
+  isLoading?: boolean
 } = {}) => {
   mockUseModelParameterRules.mockReturnValue({
     data: config.data ? { data: config.data } : undefined,
     isPending: config.isPending ?? false,
+    isLoading: config.isLoading ?? config.isPending ?? false,
   })
 }
 
@@ -232,6 +234,19 @@ describe('LLMParamsPanel', () => {
       expect(screen.getByRole('status')).toBeInTheDocument()
     })
 
+    it('should not render loading state when model is not configured and parameter rules query is pending but disabled', () => {
+      // Arrange
+      setupModelParameterRulesMock({ isPending: true, isLoading: false })
+      const props = createDefaultProps({ provider: '', modelId: '' })
+
+      // Act
+      render(<LLMParamsPanel {...props} />)
+
+      // Assert
+      expect(screen.queryByRole('status')).not.toBeInTheDocument()
+      expect(screen.getByText('common.modelProvider.parameters')).toBeInTheDocument()
+    })
+
     it('should render parameters header', () => {
       // Arrange
       setupModelParameterRulesMock({ data: [], isPending: false })

web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx

@@ -30,7 +30,8 @@ const LLMParamsPanel = ({
   onCompletionParamsChange,
 }: Props) => {
   const { t } = useTranslation()
-  const { data: parameterRulesData, isPending: isLoading } = useModelParameterRules(provider, modelId)
+  const { data: parameterRulesData, isLoading } = useModelParameterRules(provider, modelId)
+  const isRulesLoading = !!provider && !!modelId && isLoading
 
   const parameterRules: ModelParameterRule[] = useMemo(() => {
     return parameterRulesData?.data || []
@@ -66,7 +67,7 @@ const LLMParamsPanel = ({
     }
   }
 
-  if (isLoading) {
+  if (isRulesLoading) {
     return (
       <div className="mt-5"><Loading /></div>
     )