mirror of
https://github.com/yyhuni/xingrin.git
synced 2026-01-31 11:46:16 +08:00
6caf707072
- Replace all Chinese inline comments with English equivalents across 24 frontend component files - Update JSDoc comments to use English for better code documentation - Improve code readability and maintainability for international development team - Standardize comment style across directories, endpoints, ip-addresses, subdomains, and websites components - Ensure consistency with previous frontend refactoring efforts
93 lines
2.0 KiB
TypeScript
93 lines
2.0 KiB
TypeScript
"use client"
|
|
|
|
import React from "react"
|
|
import { cn } from "@/lib/utils"
|
|
import { Spinner } from "@/components/ui/spinner"
|
|
|
|
interface LoadingSpinnerProps {
|
|
size?: "sm" | "md" | "lg"
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Unified loading animation component
|
|
*
|
|
* Features:
|
|
* - Three sizes: sm(16px), md(24px), lg(32px)
|
|
* - Supports custom styles
|
|
* - Uses Tailwind CSS animations
|
|
*/
|
|
export function LoadingSpinner({ size = "sm", className }: LoadingSpinnerProps) {
|
|
const sizeMap = {
|
|
sm: "size-4",
|
|
md: "size-6",
|
|
lg: "size-8"
|
|
}
|
|
|
|
return <Spinner className={cn(sizeMap[size], className)} />
|
|
}
|
|
|
|
interface LoadingStateProps {
|
|
message?: string
|
|
size?: "sm" | "md" | "lg"
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* Loading state component with text
|
|
*
|
|
* Used for page-level loading state display
|
|
*/
|
|
export function LoadingState({
|
|
message,
|
|
size = "md",
|
|
className
|
|
}: LoadingStateProps) {
|
|
const sizeMap = {
|
|
sm: "size-4",
|
|
md: "size-6",
|
|
lg: "size-8"
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex items-center justify-center min-h-[200px] h-screen w-full", className)}>
|
|
<div className="flex flex-col items-center space-y-4">
|
|
<Spinner className={sizeMap[size]} />
|
|
<p className="text-sm text-muted-foreground">{message}</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
|
|
interface LoadingOverlayProps {
|
|
isLoading: boolean
|
|
message?: string
|
|
children: React.ReactNode
|
|
}
|
|
|
|
/**
|
|
* Loading overlay component
|
|
*
|
|
* Displays loading overlay on existing content
|
|
*/
|
|
export function LoadingOverlay({
|
|
isLoading,
|
|
message,
|
|
children
|
|
}: LoadingOverlayProps) {
|
|
return (
|
|
<div className="relative">
|
|
{children}
|
|
{isLoading && (
|
|
<div className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50">
|
|
<div className="flex flex-col items-center space-y-2">
|
|
<LoadingSpinner size="lg" />
|
|
<p className="text-sm text-muted-foreground">{message}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|