dify

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

@@ -0,0 +1,51 @@
+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 = {
+  wrapClassName: string
+  loadingFileName?: string
+}
+
+export const LoadingPlaceholder = ({ className }: { className?: string }) => (
+  <div className={cn('h-2 rounded-sm bg-text-quaternary opacity-20', className)} />
+)
+
+const Placeholder = ({
+  wrapClassName,
+  loadingFileName,
+}: Props) => {
+  return (
+    <div className={wrapClassName}>
+      <SkeletonRow>
+        <div
+          className='flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
+              border-components-panel-border bg-background-default p-1 backdrop-blur-sm'>
+          <div className='flex h-5 w-5 items-center justify-center'>
+            <Group className='text-text-tertiary' />
+          </div>
+        </div>
+        <div className="grow">
+          <SkeletonContainer>
+            <div className="flex h-5 items-center">
+              {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>
+      </SkeletonRow>
+      <SkeletonRectangle className="mt-3 w-[420px]" />
+    </div>
+  )
+}
+
+export default Placeholder