chore: refactor card loading

web/app/components/plugins/card/base/org-info.tsx

@@ -4,7 +4,6 @@ type Props = {
   orgName: string
   packageName: string
   packageNameClassName?: string
-  isLoading?: boolean
 }
 
 const OrgInfo = ({
@@ -12,32 +11,16 @@ const OrgInfo = ({
   orgName,
   packageName,
   packageNameClassName,
-  isLoading = false,
 }: Props) => {
-  const LoadingPlaceholder = ({ width }: { width: string }) => (
-    <div className={`h-2 w-${width} rounded-sm opacity-20 bg-text-quaternary`} />
-  )
   return (
     <div className={cn('flex items-center h-4 space-x-0.5', className)}>
-      {isLoading
-        ? (
-          <LoadingPlaceholder width="[41px]" />
-        )
-        : (
       <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
-        )}
       <span className='shrink-0 text-text-quaternary system-xs-regular'>
-        {isLoading ? '·' : '/'}
+        /
       </span>
-      {isLoading
-        ? (
-          <LoadingPlaceholder width="[180px]" />
-        )
-        : (
       <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
         {packageName}
       </span>
-        )}
     </div>
   )
 }

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

@@ -0,0 +1,46 @@
+import { Group } from '../../../base/icons/src/vender/other'
+import Title from './title'
+import cn from '@/utils/classnames'
+
+type Props = {
+  wrapClassName: string
+  loadingFileName: string
+}
+
+export const LoadingPlaceholder = ({ className }: { className?: string }) => (
+  <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
+)
+
+const Placeholder = ({
+  wrapClassName,
+  loadingFileName,
+}: Props) => {
+  return (
+    <div className={wrapClassName}>
+      <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">
+            <Title title={loadingFileName} />
+          </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>
+      </div>
+      <LoadingPlaceholder className="mt-3 w-[420px]" />
+    </div>
+  )
+}
+
+export default Placeholder

web/app/components/plugins/card/index.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { RiVerifiedBadgeLine } from '@remixicon/react'
 import type { Plugin } from '../types'
 import Icon from '../card/base/card-icon'
-import { Group } from '../../base/icons/src/vender/other'
 import CornerMark from './base/corner-mark'
 import Title from './base/title'
 import OrgInfo from './base/org-info'
 import Description from './base/description'
+import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
 import type { Locale } from '@/i18n'
 
@@ -41,45 +41,40 @@ const Card = ({
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj?.[locale] || obj?.['en-US'] || ''
 
-  const LoadingPlaceholder = ({ className }: { className?: string }) => (
+  const wrapClassName = cn('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', className)
-    <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
+  if (isLoading) {
+    return (
+      <Placeholder
+        wrapClassName={wrapClassName}
+        loadingFileName={loadingFileName!}
+      />
     )
+  }
 
   return (
     <div className={cn('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', className)}>
-      {!hideCornerMark && !isLoading && <CornerMark text={type} />}
+      {!hideCornerMark && <CornerMark text={type} />}
       {/* Header */}
       <div className="flex">
-        {isLoading
+        <Icon src={icon} installed={installed} />
-          ? (<div
-            className='flex max-w-10 max-h-10 p-1 justify-center items-center gap-2 flex-grow 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>)
-          : <Icon src={icon} installed={installed} />}
         <div className="ml-3 grow">
           <div className="flex items-center h-5">
-            <Title title={loadingFileName || getLocalizedText(label)} />
+            <Title title={getLocalizedText(label)} />
-            {!isLoading && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
+            <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />
             {titleLeft} {/* This can be version badge */}
           </div>
           <OrgInfo
             className="mt-0.5"
             orgName={org}
             packageName={name}
-            isLoading={isLoading}
           />
         </div>
       </div>
-      {isLoading
+      <Description
-        ? <LoadingPlaceholder className="mt-3 w-[420px]" />
-        : <Description
         className="mt-3"
         text={getLocalizedText(brief)}
         descriptionLineRows={descriptionLineRows}
-        />}
+      />
       {footer && <div>{footer}</div>}
     </div>
   )