From 73ce8a17a5657ae4c5afb6130690757807cf4a7d Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 15 Nov 2024 10:39:57 +0800
Subject: [PATCH] feat: add loading

---
 .../components/plugins/card/base/placeholder.tsx  |  8 ++++++--
 .../install-bundle/item/loading.tsx               | 15 +++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx
index a8b106a40b..96b83f152e 100644
--- a/web/app/components/plugins/card/base/placeholder.tsx
+++ b/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]" />
diff --git a/web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx b/web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx
index e89022aad6..5e33363ecf 100644
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loading.tsx
+++ b/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>
   )
 }