diff --git a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
index f75cc42433..606e1da703 100644
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@@ -36,10 +36,10 @@ import type { FormValue } from '@/app/components/header/account-setting/model-pr
 import InstructionEditorInWorkflow from './instruction-editor-in-workflow'
 import InstructionEditorInBasic from './instruction-editor'
 import { GeneratorType } from './types'
-import Link from 'next/link'
 import Result from './result'
 import useGenData from './use-gen-data'
 import IdeaOutput from './idea-output'
+import ResPlaceholder from './res-placeholder'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetAutomaticResProps = {
@@ -183,16 +183,6 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
     </div>
   )
 
-  const renderNoData = (
-    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
-      <Generator className='size-8 text-text-quaternary' />
-      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
-        <div>{t('appDebug.generate.newNoDataLine1')}</div>
-        <Link className='text-text-accent' href='//todo' target='_blank'>{t('appDebug.generate.newNoDataLine2')}</Link>
-      </div>
-    </div>
-  )
-
   const handleModelChange = useCallback((newValue: { modelId: string; provider: string; mode?: string; features?: string[] }) => {
     const newModel = {
       ...model,
@@ -376,7 +366,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
           </div>
         )}
         {isLoading && renderLoading}
-        {isShowAutoPromptResPlaceholder() && !renderNoData}
+        {isShowAutoPromptResPlaceholder() && <ResPlaceholder />}
         {isShowConfirmOverwrite && (
           <Confirm
             title={t('appDebug.generate.overwriteTitle')}
diff --git a/web/app/components/app/configuration/config/automatic/res-placeholder.tsx b/web/app/components/app/configuration/config/automatic/res-placeholder.tsx
new file mode 100644
index 0000000000..a6a03aea7b
--- /dev/null
+++ b/web/app/components/app/configuration/config/automatic/res-placeholder.tsx
@@ -0,0 +1,20 @@
+'use client'
+import { Generator } from '@/app/components/base/icons/src/vender/other'
+import Link from 'next/link'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const ResPlaceholder: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
+      <Generator className='size-8 text-text-quaternary' />
+      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
+        <div>{t('appDebug.generate.newNoDataLine1')}</div>
+        <Link className='text-text-accent' href='//todo' target='_blank'>{t('appDebug.generate.newNoDataLine2')}</Link>
+      </div>
+    </div>
+  )
+}
+export default React.memo(ResPlaceholder)
diff --git a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
index f4e5801634..fb69ca0d11 100644
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@@ -23,6 +23,7 @@ import { GeneratorType } from '../automatic/types'
 import InstructionEditor from '../automatic/instruction-editor-in-workflow'
 import useGenData from '../automatic/use-gen-data'
 import Result from '../automatic/result'
+import ResPlaceholder from '../automatic/res-placeholder'
 
 const i18nPrefix = 'appDebug.generate'
 export type IGetCodeGeneratorResProps = {
@@ -179,15 +180,6 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
       <div className='text-[13px] text-text-tertiary'>{t('appDebug.codegen.loading')}</div>
     </div>
   )
-  const renderNoData = (
-    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
-      <Generator className='h-14 w-14 text-text-tertiary' />
-      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
-        <div>{t('appDebug.codegen.noDataLine1')}</div>
-        <div>{t('appDebug.codegen.noDataLine2')}</div>
-      </div>
-    </div>
-  )
 
   return (
     <Modal
@@ -245,7 +237,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
           </div>
         </div>
         {isLoading && renderLoading}
-        {!isLoading && !current && renderNoData}
+        {!isLoading && !current && <ResPlaceholder />}
         {(!isLoading && current) && (
           <div className='h-full w-0 grow bg-background-default-subtle p-6 pb-0'>
             <Result