dify

dify/web/app/components/datasets/documents/detail/completed/skeleton/full-doc-list-skeleton.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+const Slice = React.memo(() => {
+  return (
+    <div className='flex flex-col gap-y-1'>
+      <div className='flex h-5 w-full items-center bg-state-base-hover'>
+        <span className='h-5 w-[30px] bg-state-base-hover-alt' />
+      </div>
+      <div className='h-5 w-2/3 bg-state-base-hover' />
+    </div>
+  )
+})
+
+Slice.displayName = 'Slice'
+
+const FullDocListSkeleton = () => {
+  return (
+    <div className='relative z-10 flex w-full grow flex-col gap-y-3 overflow-y-hidden'>
+      <div className='absolute bottom-14 left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
+      {Array.from({ length: 15 }).map((_, index) => <Slice key={index} />)}
+    </div>
+  )
+}
+
+export default React.memo(FullDocListSkeleton)

dify/web/app/components/datasets/documents/detail/completed/skeleton/general-list-skeleton.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import {
+  SkeletonContainer,
+  SkeletonPoint,
+  SkeletonRectangle,
+  SkeletonRow,
+} from '@/app/components/base/skeleton'
+import Checkbox from '@/app/components/base/checkbox'
+import Divider from '@/app/components/base/divider'
+
+export const CardSkelton = React.memo(() => {
+  return (
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+          <SkeletonPoint className='opacity-20' />
+          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonPoint className='opacity-20' />
+          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRow className='grow justify-end gap-1'>
+            <SkeletonRectangle className='w-12 bg-text-quaternary' />
+            <SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
+          </SkeletonRow>
+        </SkeletonRow>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-full bg-text-quaternary' />
+        </SkeletonRow>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-full bg-text-quaternary' />
+        </SkeletonRow>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+        </SkeletonRow>
+      </SkeletonContainer>
+      <SkeletonContainer className='px-2 py-1.5'>
+        <SkeletonRow>
+          <SkeletonRectangle className='w-14 bg-text-quaternary' />
+          <SkeletonRectangle className='w-[88px] bg-text-quaternary' />
+          <SkeletonRectangle className='w-14 bg-text-quaternary' />
+        </SkeletonRow>
+      </SkeletonContainer>
+    </SkeletonContainer>
+  )
+})
+
+CardSkelton.displayName = 'CardSkelton'
+
+const GeneralListSkeleton = () => {
+  return (
+    <div className='relative z-10 flex grow flex-col overflow-y-hidden'>
+      <div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
+      {Array.from({ length: 10 }).map((_, index) => {
+        return (
+          <div key={index} className='flex items-start gap-x-2'>
+            <Checkbox
+              key={`${index}-checkbox`}
+              className='mt-3.5 shrink-0'
+              disabled
+            />
+            <div className='grow'>
+              <CardSkelton />
+              {index !== 9 && <div className='w-full px-3'>
+                <Divider type='horizontal' className='my-1 bg-divider-subtle' />
+              </div>}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(GeneralListSkeleton)

dify/web/app/components/datasets/documents/detail/completed/skeleton/paragraph-list-skeleton.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import { RiArrowRightSLine } from '@remixicon/react'
+import {
+  SkeletonContainer,
+  SkeletonPoint,
+  SkeletonRectangle,
+  SkeletonRow,
+} from '@/app/components/base/skeleton'
+import Checkbox from '@/app/components/base/checkbox'
+import Divider from '@/app/components/base/divider'
+
+const CardSkelton = React.memo(() => {
+  return (
+    <SkeletonContainer className='gap-y-0 p-1 pb-2'>
+      <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+          <SkeletonPoint className='opacity-20' />
+          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonPoint className='opacity-20' />
+          <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          <SkeletonRow className='grow justify-end gap-1'>
+            <SkeletonRectangle className='w-12 bg-text-quaternary' />
+            <SkeletonRectangle className='mx-1 w-2 bg-text-quaternary' />
+          </SkeletonRow>
+        </SkeletonRow>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-full bg-text-quaternary' />
+        </SkeletonRow>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-full bg-text-quaternary' />
+        </SkeletonRow>
+        <SkeletonRow className='py-0.5'>
+          <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+        </SkeletonRow>
+      </SkeletonContainer>
+      <SkeletonContainer className='p-1 pb-2'>
+        <SkeletonRow>
+          <SkeletonRow className='h-7 gap-x-0.5 rounded-lg bg-dataset-child-chunk-expand-btn-bg pl-1 pr-3'>
+            <RiArrowRightSLine className='h-4 w-4 text-text-secondary opacity-20' />
+            <SkeletonRectangle className='w-32 bg-text-quaternary' />
+          </SkeletonRow>
+        </SkeletonRow>
+      </SkeletonContainer>
+    </SkeletonContainer>
+  )
+})
+
+CardSkelton.displayName = 'CardSkelton'
+
+const ParagraphListSkeleton = () => {
+  return (
+    <div className='relative z-10 flex h-full flex-col overflow-y-hidden'>
+      <div className='absolute left-0 top-0 z-20 h-full w-full bg-dataset-chunk-list-mask-bg' />
+      {Array.from({ length: 10 }).map((_, index) => {
+        return (
+          <div key={index} className='flex items-start gap-x-2'>
+            <Checkbox
+              key={`${index}-checkbox`}
+              className='mt-3.5 shrink-0'
+              disabled
+            />
+            <div className='grow'>
+              <CardSkelton />
+              {index !== 9 && <div className='w-full px-3'>
+                <Divider type='horizontal' className='my-1 bg-divider-subtle' />
+              </div>}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(ParagraphListSkeleton)

dify/web/app/components/datasets/documents/detail/completed/skeleton/parent-chunk-card-skeleton.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  SkeletonContainer,
+  SkeletonPoint,
+  SkeletonRectangle,
+  SkeletonRow,
+} from '@/app/components/base/skeleton'
+
+const ParentChunkCardSkelton = () => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex flex-col pb-2'>
+      <SkeletonContainer className='gap-y-0 p-1 pb-0'>
+        <SkeletonContainer className='gap-y-0.5 px-2 pt-1.5'>
+          <SkeletonRow className='py-0.5'>
+            <SkeletonRectangle className='w-[72px] bg-text-quaternary' />
+            <SkeletonPoint className='opacity-20' />
+            <SkeletonRectangle className='w-24 bg-text-quaternary' />
+            <SkeletonPoint className='opacity-20' />
+            <SkeletonRectangle className='w-24 bg-text-quaternary' />
+          </SkeletonRow>
+          <SkeletonRow className='py-0.5'>
+            <SkeletonRectangle className='w-full bg-text-quaternary' />
+          </SkeletonRow>
+          <SkeletonRow className='py-0.5'>
+            <SkeletonRectangle className='w-full bg-text-quaternary' />
+          </SkeletonRow>
+          <SkeletonRow className='py-0.5'>
+            <SkeletonRectangle className='w-2/3 bg-text-quaternary' />
+          </SkeletonRow>
+        </SkeletonContainer>
+      </SkeletonContainer>
+      <div className='mt-0.5 flex items-center px-3'>
+        <button type='button' className='system-xs-semibold-uppercase pt-0.5 text-components-button-secondary-accent-text-disabled' disabled>
+          {t('common.operation.viewMore')}
+        </button>
+      </div>
+    </div>
+  )
+}
+
+ParentChunkCardSkelton.displayName = 'ParentChunkCardSkelton'
+
+export default React.memo(ParentChunkCardSkelton)