apply the skeleton component to the Plugin loading card

web/app/components/base/skeleton/index.tsx

@@ -3,7 +3,7 @@ import classNames from '@/utils/classnames'
 
 type SkeletonProps = ComponentProps<'div'>
 
-export const SkeletonContanier: FC<SkeletonProps> = (props) => {
+export const SkeletonContainer: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
     <div className={classNames('flex flex-col gap-1', className)} {...rest}>
@@ -24,7 +24,7 @@ export const SkeletonRow: FC<SkeletonProps> = (props) => {
 export const SkeletonRectangle: FC<SkeletonProps> = (props) => {
   const { className, children, ...rest } = props
   return (
-    <div className={classNames('h-2 rounded-sm opacity-20 bg-text-tertiary my-1', className)} {...rest}>
+    <div className={classNames('h-2 rounded-sm opacity-20 bg-text-quaternary my-1', className)} {...rest}>
       {children}
     </div>
   )

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

@@ -1,5 +1,6 @@
 import { Group } from '../../../base/icons/src/vender/other'
 import Title from './title'
+import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -17,7 +18,7 @@ const Placeholder = ({
 }: Props) => {
   return (
     <div className={wrapClassName}>
-      <div className="flex">
+      <SkeletonRow>
         <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'>
@@ -25,24 +26,24 @@ const Placeholder = ({
             <Group className='text-text-tertiary' />
           </div>
         </div>
-        <div className="ml-3 grow">
-          <div className="flex items-center h-5">
-            {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]" />
-            <span className='shrink-0 text-text-quaternary system-xs-regular'>
-              ·
-            </span>
-            <LoadingPlaceholder className="w-[180px]" />
-          </div>
+        <div className="grow">
+          <SkeletonContainer>
+            <div className="flex items-center h-5">
+              {loadingFileName ? (
+                <Title title={loadingFileName} />
+              ) : (
+                <SkeletonRectangle className="w-[260px]" />
+              )}
+            </div>
+            <SkeletonRow className="h-4">
+              <SkeletonRectangle className="w-[41px]" />
+              <SkeletonPoint />
+              <SkeletonRectangle className="w-[180px]" />
+            </SkeletonRow>
+          </SkeletonContainer>
         </div>
-      </div>
-      <LoadingPlaceholder className="mt-3 w-[420px]" />
+      </SkeletonRow>
+      <SkeletonRectangle className="mt-3 w-[420px]" />
     </div>
   )
 }