8
Switch language to English

Loading

السابقالتالي

Loading spinner and skeleton components.

import React from "react";

interface LoadingProps {
  fullScreen?: boolean;
  size?: 'sm' | 'md' | 'lg';
  text?: string;
}

const Loading: React.FC<LoadingProps> = ({ 
  fullScreen = true, 
  size = 'md',
  text 
}) => {
  const sizeClasses = {
    sm: 'w-6 h-6',
    md: 'w-9 h-9',
    lg: 'w-12 h-12'
  };

  const spinner = (
    <div className="flex flex-col items-center">
      <div className={`${sizeClasses[size]} border-2 border-foreground/20 border-t-foreground rounded-full animate-spin`}></div>
      {text && (
        <p className="mt-2 text-sm text-muted-foreground">{text}</p>
      )}
    </div>
  );

  if (fullScreen) {
    return (
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
        {spinner}
      </div>
    );
  }

  return spinner;
};

export default Loading; 

Installation

pnpm dlx codebase add loading

Usage

import Loading from "@/components/atom/loading"
<Loading />