jan-henrik/respira
1
0
Fork 0
mirror of https://github.com/jhbruhn/respira.git synced 2026-01-27 10:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add dark mode support to skeleton loaders

Browse source 
Update all skeleton components to properly support dark mode with appropriate color variants for backgrounds, borders, and gradients.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik 2025-12-07 13:52:08 +01:00
parent 8ee7d0ce7b
commit 45c3f2ee07
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/SkeletonLoader.tsx
View file

@ -4,7 +4,7 @@ interface SkeletonLoaderProps {
}
export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoaderProps) {
const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%]';
const baseClasses = 'animate-pulse bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700 bg-[length:200%_100%]';
const variantClasses = {
text: 'h-4 rounded',
@ -19,17 +19,17 @@ export function SkeletonLoader({ className = '', variant = 'rect' }: SkeletonLoa
export function PatternCanvasSkeleton() {
return (
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300">
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
<SkeletonLoader className="h-7 w-40" variant="text" />
</div>
<div className="relative w-full h-[600px] border border-gray-300 rounded bg-gray-50 overflow-hidden">
<div className="relative w-full h-[600px] border border-gray-300 dark:border-gray-600 rounded bg-gray-50 dark:bg-gray-900 overflow-hidden">
<div className="flex items-center justify-center h-full">
<div className="text-center space-y-4">
<div className="relative w-24 h-24 mx-auto">
<SkeletonLoader className="w-24 h-24" variant="circle" />
<div className="absolute inset-0 flex items-center justify-center">
<svg className="w-12 h-12 text-gray-400 animate-spin" fill="none" viewBox="0 0 24 24">
<svg className="w-12 h-12 text-gray-400 dark:text-gray-500 animate-spin" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
@ -50,7 +50,7 @@ export function PatternInfoSkeleton() {
return (
<div className="mt-4">
<SkeletonLoader className="h-6 w-40 mb-4" variant="text" />
<div className="bg-gray-50 p-4 rounded-lg space-y-3">
<div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg space-y-3">
{[1, 2, 3, 4].map((i) => (
<div key={i} className="flex justify-between">
<SkeletonLoader className="h-4 w-24" variant="text" />
@ -64,8 +64,8 @@ export function PatternInfoSkeleton() {
export function MachineConnectionSkeleton() {
return (
<div className="bg-white p-6 rounded-lg shadow-md">
<div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300">
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<div className="flex items-center justify-between mb-4 pb-2 border-b-2 border-gray-300 dark:border-gray-600">
<SkeletonLoader className="h-7 w-48" variant="text" />
</div>
<div className="space-y-4">
@ -73,7 +73,7 @@ export function MachineConnectionSkeleton() {
<SkeletonLoader className="h-4 w-16" variant="text" />
<SkeletonLoader className="h-8 w-32 rounded-lg" />
</div>
<div className="bg-gray-50 p-4 rounded-lg space-y-2">
<div className="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg space-y-2">
<div className="flex justify-between">
<SkeletonLoader className="h-4 w-20" variant="text" />
<SkeletonLoader className="h-4 w-24" variant="text" />