From 35384bda410c9f6f34c383dd4e4a33e251e9bf97 Mon Sep 17 00:00:00 2001 From: Joel Date: Tue, 15 Oct 2024 22:52:57 +0800 Subject: [PATCH] chore: refactor card loading --- .../components/plugins/card/base/org-info.tsx | 27 ++--------- .../plugins/card/base/placeholder.tsx | 46 +++++++++++++++++++ web/app/components/plugins/card/index.tsx | 43 ++++++++--------- 3 files changed, 70 insertions(+), 46 deletions(-) create mode 100644 web/app/components/plugins/card/base/placeholder.tsx diff --git a/web/app/components/plugins/card/base/org-info.tsx b/web/app/components/plugins/card/base/org-info.tsx index ed184b8bd8..d68f31cf37 100644 --- a/web/app/components/plugins/card/base/org-info.tsx +++ b/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 }) => ( -
- ) return (
- {isLoading - ? ( - - ) - : ( - {orgName} - )} + {orgName} - {isLoading ? '·' : '/'} + / + + + {packageName} - {isLoading - ? ( - - ) - : ( - - {packageName} - - )}
) } diff --git a/web/app/components/plugins/card/base/placeholder.tsx b/web/app/components/plugins/card/base/placeholder.tsx new file mode 100644 index 0000000000..a8b106a40b --- /dev/null +++ b/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 }) => ( +
+) + +const Placeholder = ({ + wrapClassName, + loadingFileName, +}: Props) => { + return ( +
+
+
+
+ +
+
+
+
+ + </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 diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx index 75ff9236a9..6b9432633a 100644 --- a/web/app/components/plugins/card/index.tsx +++ b/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 }) => ( - <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} /> - ) + 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) + 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 - ? (<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} />} + <Icon src={icon} installed={installed} /> <div className="ml-3 grow"> <div className="flex items-center h-5"> - <Title title={loadingFileName || getLocalizedText(label)} /> - {!isLoading && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />} + <Title title={getLocalizedText(label)} /> + <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 - ? <LoadingPlaceholder className="mt-3 w-[420px]" /> - : <Description - className="mt-3" - text={getLocalizedText(brief)} - descriptionLineRows={descriptionLineRows} - />} + <Description + className="mt-3" + text={getLocalizedText(brief)} + descriptionLineRows={descriptionLineRows} + /> {footer && <div>{footer}</div>} </div> )