feat: loading error struct

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}

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)

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 = () => {

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 = {

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 = {