diff --git a/web/app/(commonLayout)/plugins/test/card/page.tsx b/web/app/(commonLayout)/plugins/test/card/page.tsx
index c41f5ac27d..d1c87e18be 100644
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@@ -7,15 +7,17 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 import Badge from '@/app/components/base/badge'
 import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
 import { useBoolean } from 'ahooks'
+import LoadingError from '@/app/components/plugins/install-plugin/base/loading-error'
 
 const PluginList = () => {
   const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
   const [isShow, {
     setFalse: hide,
-  }] = useBoolean(true)
+  }] = useBoolean(false)
 
   return (
     <div className='pb-3 bg-white'>
+      <LoadingError />
       {isShow && (
         <InstallBundle
           onClose={hide}
diff --git a/web/app/components/plugins/install-plugin/base/loading-error.tsx b/web/app/components/plugins/install-plugin/base/loading-error.tsx
new file mode 100644
index 0000000000..926bc1872f
--- /dev/null
+++ b/web/app/components/plugins/install-plugin/base/loading-error.tsx
@@ -0,0 +1,32 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { Group } from '../../../base/icons/src/vender/other'
+import cn from '@/utils/classnames'
+import { LoadingPlaceholder } from '@/app/components/plugins/card/base/placeholder'
+
+const LoadingError: FC = () => {
+  return (
+    <div>
+      <div className="flex">
+        <div
+          className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
+              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
+          <div className='flex w-5 h-5 justify-center items-center'>
+            <Group className='text-text-tertiary' />
+          </div>
+        </div>
+        <div className="ml-3 grow">
+          <div className="flex items-center h-5 system-md-semibold text-text-destructive">
+            Plugin load error
+          </div>
+          <div className={cn('flex items-center h-4 space-x-0.5')}>
+            This plugin will not be installed
+          </div>
+        </div>
+      </div>
+      <LoadingPlaceholder className="mt-3 w-[420px]" />
+    </div>
+  )
+}
+export default React.memo(LoadingError)
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx b/web/app/components/plugins/install-plugin/base/loading.tsx
similarity index 91%
rename from web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx
rename to web/app/components/plugins/install-plugin/base/loading.tsx
index 5e33363ecf..52cccc2cd0 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx
+++ b/web/app/components/plugins/install-plugin/base/loading.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import Placeholder from '../../../card/base/placeholder'
+import Placeholder from '../../card/base/placeholder'
 import Checkbox from '@/app/components/base/checkbox'
 
 const Loading = () => {
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
index 9d50d41343..35ec9d2369 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@@ -4,7 +4,7 @@ import React, { useEffect } from 'react'
 import type { GitHubItemAndMarketPlaceDependency, Plugin } from '../../../types'
 import { pluginManifestToCardPluginProps } from '../../utils'
 import { useUploadGitHub } from '@/service/use-plugins'
-import Loading from './loading'
+import Loading from '../../base/loading'
 import LoadedItem from './loaded-item'
 
 type Props = {
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
index 836869df63..f7de4d09bc 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import type { Plugin } from '../../../types'
-import Loading from './loading'
+import Loading from '../../base/loading'
 import LoadedItem from './loaded-item'
 
 type Props = {