usaa.ma
A deployable markdown editor that connects with your self hosted files and lets you edit in a beautiful interface
1import React from 'react';
2
3interface LoadingProps {
4 size?: 'sm' | 'md' | 'lg';
5 text?: string;
6}
7
8export const Loading: React.FC<LoadingProps> = ({ size = 'md', text }) => {
9 const sizeClasses = {
10 sm: 'w-4 h-4 border-2',
11 md: 'w-8 h-8 border-3',
12 lg: 'w-12 h-12 border-4',
13 };
14
15 return (
16 <div className="flex flex-col items-center justify-center gap-3">
17 <div
18 className={`${sizeClasses[size]} border-black border-t-amber-600 rounded-full animate-spin`}
19 role="status"
20 aria-label="Loading"
21 />
22 {text && (
23 <p className="text-sm font-medium text-gray-700">{text}</p>
24 )}
25 </div>
26 );
27};
28
29interface LoadingOverlayProps {
30 text?: string;
31}
32
33export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ text }) => {
34 return (
35 <div className="absolute inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50">
36 <Loading size="lg" text={text} />
37 </div>
38 );
39};
40
41interface SkeletonProps {
42 className?: string;
43}
44
45export const Skeleton: React.FC<SkeletonProps> = ({ className = '' }) => {
46 return (
47 <div
48 className={`animate-pulse bg-gray-200 border-2 border-black ${className}`}
49 role="status"
50 aria-label="Loading content"
51 />
52 );
53};