feat: add loading

web/app/components/plugins/card/base/placeholder.tsx

@@ -4,7 +4,7 @@ import cn from '@/utils/classnames'
 
 type Props = {
   wrapClassName: string
-  loadingFileName: string
+  loadingFileName?: string
 }
 
 export const LoadingPlaceholder = ({ className }: { className?: string }) => (
@@ -27,7 +27,11 @@ const Placeholder = ({
         </div>
         <div className="ml-3 grow">
           <div className="flex items-center h-5">
-            <Title title={loadingFileName} />
+            {loadingFileName ? (
+              <Title title={loadingFileName} />
+            ) : (
+              <LoadingPlaceholder className="w-[260px]" />
+            )}
           </div>
           <div className={cn('flex items-center h-4 space-x-0.5')}>
             <LoadingPlaceholder className="w-[41px]" />

web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx

@@ -1,10 +1,21 @@
 'use client'
 import React from 'react'
+import Placeholder from '../../../card/base/placeholder'
+import Checkbox from '@/app/components/base/checkbox'
 
 const Loading = () => {
   return (
-    <div>
-      Loading...
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={false}
+        disabled
+      />
+      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+        <Placeholder
+          wrapClassName='w-full'
+        />
+      </div>
     </div>
   )
 }