school_compare/nextjs-app/components/LoadingSkeleton.tsx

/**
 * LoadingSkeleton Component
 * Placeholder for loading states
 */

import styles from './LoadingSkeleton.module.css';

interface LoadingSkeletonProps {
  count?: number;
  type?: 'card' | 'list' | 'text';
}

export function LoadingSkeleton({ count = 3, type = 'card' }: LoadingSkeletonProps) {
  if (type === 'card') {
    return (
      <div className={styles.grid}>
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className={styles.skeletonCard}>
            <div className={`${styles.skeleton} ${styles.title}`} />
            <div className={styles.meta}>
              <div className={`${styles.skeleton} ${styles.tag}`} />
              <div className={`${styles.skeleton} ${styles.tag}`} />
            </div>
            <div className={styles.metrics}>
              <div className={`${styles.skeleton} ${styles.metric}`} />
              <div className={`${styles.skeleton} ${styles.metric}`} />
              <div className={`${styles.skeleton} ${styles.metric}`} />
            </div>
            <div className={styles.actions}>
              <div className={`${styles.skeleton} ${styles.button}`} />
              <div className={`${styles.skeleton} ${styles.button}`} />
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (type === 'list') {
    return (
      <div className={styles.list}>
        {Array.from({ length: count }).map((_, i) => (
          <div key={i} className={styles.skeletonListItem}>
            <div className={`${styles.skeleton} ${styles.listTitle}`} />
            <div className={`${styles.skeleton} ${styles.listText}`} />
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className={styles.textContainer}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className={`${styles.skeleton} ${styles.text}`} />
      ))}
    </div>
  );
}