dify

dify/web/app/components/base/loading/index.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import Loading from './index'
+
+describe('Loading Component', () => {
+  it('renders correctly with default props', () => {
+    const { container } = render(<Loading />)
+    expect(container.firstChild).toHaveClass('flex w-full items-center justify-center')
+    expect(container.firstChild).not.toHaveClass('h-full')
+  })
+
+  it('renders correctly with area type', () => {
+    const { container } = render(<Loading type="area" />)
+    expect(container.firstChild).not.toHaveClass('h-full')
+  })
+
+  it('renders correctly with app type', () => {
+    const { container } = render(<Loading type='app' />)
+    expect(container.firstChild).toHaveClass('h-full')
+  })
+
+  it('contains SVG with spin-animation class', () => {
+    const { container } = render(<Loading />)
+
+    const svgElement = container.querySelector('svg')
+    expect(svgElement).toHaveClass('spin-animation')
+  })
+})

dify/web/app/components/base/loading/index.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import Loading from '.'
+
+const meta = {
+  title: 'Base/Feedback/Loading',
+  component: Loading,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Spinner used while fetching data (`area`) or bootstrapping the full application shell (`app`).',
+      },
+    },
+  },
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['area', 'app'],
+    },
+  },
+  args: {
+    type: 'area',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Loading>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const LoadingPreview = ({ type }: { type: 'area' | 'app' }) => {
+  const containerHeight = type === 'app' ? 'h-48' : 'h-20'
+  const title = type === 'app' ? 'App loading state' : 'Inline loading state'
+
+  return (
+    <div className="flex flex-col items-center gap-4">
+      <span className="text-xs uppercase tracking-[0.18em] text-text-tertiary">{title}</span>
+      <div
+        className={`flex w-64 items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle ${containerHeight}`}
+      >
+        <Loading type={type} />
+      </div>
+    </div>
+  )
+}
+
+export const AreaSpinner: Story = {
+  render: () => <LoadingPreview type="area" />,
+}
+
+export const AppSpinner: Story = {
+  render: () => <LoadingPreview type="app" />,
+}

dify/web/app/components/base/loading/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import './style.css'
+type ILoadingProps = {
+  type?: 'area' | 'app'
+}
+const Loading = (
+  { type = 'area' }: ILoadingProps = { type: 'area' },
+) => {
+  return (
+    <div className={`flex w-full items-center justify-center ${type === 'app' ? 'h-full' : ''}`}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className='spin-animation'>
+        <g clipPath="url(#clip0_324_2488)">
+          <path d="M15 0H10C9.44772 0 9 0.447715 9 1V6C9 6.55228 9.44772 7 10 7H15C15.5523 7 16 6.55228 16 6V1C16 0.447715 15.5523 0 15 0Z" fill="#1C64F2" />
+          <path opacity="0.5" d="M15 9H10C9.44772 9 9 9.44772 9 10V15C9 15.5523 9.44772 16 10 16H15C15.5523 16 16 15.5523 16 15V10C16 9.44772 15.5523 9 15 9Z" fill="#1C64F2" />
+          <path opacity="0.1" d="M6 9H1C0.447715 9 0 9.44772 0 10V15C0 15.5523 0.447715 16 1 16H6C6.55228 16 7 15.5523 7 15V10C7 9.44772 6.55228 9 6 9Z" fill="#1C64F2" />
+          <path opacity="0.2" d="M6 0H1C0.447715 0 0 0.447715 0 1V6C0 6.55228 0.447715 7 1 7H6C6.55228 7 7 6.55228 7 6V1C7 0.447715 6.55228 0 6 0Z" fill="#1C64F2" />
+        </g>
+        <defs>
+          <clipPath id="clip0_324_2488">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+
+    </div>
+  )
+}
+export default Loading

dify/web/app/components/base/loading/style.css

@@ -0,0 +1,41 @@
+.spin-animation path {
+    animation: custom 2s linear infinite;
+}
+
+@keyframes custom {
+    0% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0.1;
+    }
+
+    50% {
+        opacity: 0.2;
+    }
+
+    75% {
+        opacity: 0.5;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.spin-animation path:nth-child(1) {
+    animation-delay: 0s;
+}
+
+.spin-animation path:nth-child(2) {
+    animation-delay: 0.5s;
+}
+
+.spin-animation path:nth-child(3) {
+    animation-delay: 1s;
+}
+
+.spin-animation path:nth-child(4) {
+    animation-delay: 2s;
+}