dify

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

@@ -0,0 +1,49 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import Spinner from './index'
+
+describe('Spinner component', () => {
+  it('should render correctly when loading is true', () => {
+    const { container } = render(<Spinner loading={true} />)
+    const spinner = container.firstChild as HTMLElement
+
+    expect(spinner).toHaveClass('animate-spin')
+
+    // Check for accessibility text
+    const screenReaderText = spinner.querySelector('span')
+    expect(screenReaderText).toBeInTheDocument()
+    expect(screenReaderText).toHaveTextContent('Loading...')
+  })
+
+  it('should be hidden when loading is false', () => {
+    const { container } = render(<Spinner loading={false} />)
+    const spinner = container.firstChild as HTMLElement
+
+    expect(spinner).toHaveClass('hidden')
+  })
+
+  it('should render with custom className', () => {
+    const customClass = 'text-blue-500'
+    const { container } = render(<Spinner loading={true} className={customClass} />)
+    const spinner = container.firstChild as HTMLElement
+
+    expect(spinner).toHaveClass(customClass)
+  })
+
+  it('should render children correctly', () => {
+    const childText = 'Child content'
+    const { getByText } = render(
+      <Spinner loading={true}>{childText}</Spinner>,
+    )
+
+    expect(getByText(childText)).toBeInTheDocument()
+  })
+
+  it('should use default loading value (false) when not provided', () => {
+    const { container } = render(<Spinner />)
+    const spinner = container.firstChild as HTMLElement
+
+    expect(spinner).toHaveClass('hidden')
+  })
+})

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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import Spinner from '.'
+
+const SpinnerPlayground = ({
+  loading = true,
+}: {
+  loading?: boolean
+}) => {
+  const [isLoading, setIsLoading] = useState(loading)
+
+  return (
+    <div className="flex w-full max-w-xs flex-col items-center gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
+      <p className="text-xs uppercase tracking-[0.18em] text-text-tertiary">Spinner</p>
+      <Spinner loading={isLoading} className="text-primary-500" />
+      <button
+        type="button"
+        className="rounded-md border border-divider-subtle bg-background-default px-3 py-1 text-xs font-medium text-text-secondary hover:bg-state-base-hover"
+        onClick={() => setIsLoading(prev => !prev)}
+      >
+        {isLoading ? 'Stop' : 'Start'} loading
+      </button>
+    </div>
+  )
+}
+
+const meta = {
+  title: 'Base/Feedback/Spinner',
+  component: SpinnerPlayground,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Minimal spinner powered by Tailwind utilities. Toggle the state to inspect motion-reduced behaviour.',
+      },
+    },
+  },
+  argTypes: {
+    loading: { control: 'boolean' },
+  },
+  args: {
+    loading: true,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof SpinnerPlayground>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}

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

@@ -0,0 +1,24 @@
+import type { FC } from 'react'
+import React from 'react'
+
+type Props = {
+  loading?: boolean
+  className?: string
+  children?: React.ReactNode | string
+}
+
+const Spinner: FC<Props> = ({ loading = false, children, className }) => {
+  return (
+    <div
+      className={`inline-block h-4 w-4 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] text-gray-200 ${loading ? 'motion-reduce:animate-[spin_1.5s_linear_infinite]' : 'hidden'} ${className ?? ''}`}
+      role="status"
+    >
+      <span
+        className="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
+      >Loading...</span>
+      {children}
+    </div>
+  )
+}
+
+export default Spinner