tm_panel/src/components/loading.tsx

import { cn } from "@/lib/utils";

interface IProps {
  className?: string | null;
}

/**
 * Full-screen route-style loader (orbs, rings, shimmer). Pass `className` to adapt
 * the shell—for example `min-h-48 flex-none` inside compact panels.
 */
const Loading = ({ className }: IProps) => {
  return (
    <>
      <style>{`
        @keyframes app-route-loading-shimmer {
          0% { transform: translateX(-100%); }
          100% { transform: translateX(400%); }
        }
      `}</style>
      <div
        className={cn(
          "relative flex min-h-svh w-full min-w-0 flex-1 items-center justify-center overflow-hidden bg-gray dark:bg-dark",
          className,
        )}
      >
        {/* Soft gradient wash */}
        <div
          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(87,80,241,0.22),transparent)] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(87,80,241,0.35),transparent)]"
          aria-hidden
        />

        {/* Floating orbs */}
        <div
          className="pointer-events-none absolute -left-32 top-1/4 h-72 w-72 animate-pulse rounded-full bg-primary/20 blur-3xl dark:bg-primary/25"
          aria-hidden
        />
        <div
          className="pointer-events-none absolute -right-24 bottom-1/4 h-64 w-64 animate-pulse rounded-full bg-blue/25 blur-3xl dark:bg-blue/20"
          style={{ animationDelay: "1s" }}
          aria-hidden
        />
        <div
          className="pointer-events-none absolute left-1/2 top-1/2 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/10 blur-[100px] dark:bg-primary/15"
          aria-hidden
        />

        {/* Subtle grid */}
        <div
          className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,rgba(148,163,184,0.06)_1px,transparent_1px),linear-gradient(to_bottom,rgba(148,163,184,0.06)_1px,transparent_1px)] bg-[size:48px_48px] dark:bg-[linear-gradient(to_right,rgba(55,65,81,0.15)_1px,transparent_1px),linear-gradient(to_bottom,rgba(55,65,81,0.15)_1px,transparent_1px)]"
          aria-hidden
        />

        <div className="relative z-10 flex flex-col items-center gap-8 px-6">
          <div className="relative flex h-28 w-28 items-center justify-center">
            {/* Outer glow */}
            <div className="absolute inset-0 rounded-full bg-primary/20 blur-xl dark:bg-primary/30" />

            {/* Concentric rings */}
            <div className="absolute inset-0 animate-spin rounded-full border-2 border-transparent border-r-primary/40 border-t-primary/90 shadow-[0_0_20px_rgba(87,80,241,0.35)]" />
            <div
              className="absolute inset-2 animate-[spin_2.5s_linear_infinite_reverse] rounded-full border-2 border-transparent border-b-blue/70 border-l-blue/30"
              aria-hidden
            />
            <div className="absolute inset-5 rounded-full border border-stroke/80 dark:border-stroke-dark/60" />

            {/* Core */}
            <div className="relative flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-primary to-blue shadow-lg ring-4 ring-white/60 dark:ring-dark-2/80">
              <span className="text-lg font-bold tracking-tight text-white drop-shadow-sm">
                OL
              </span>
            </div>
          </div>

          <div className="flex flex-col items-center gap-3 text-center">
            <div className="flex items-center gap-1.5">
              <span className="h-2 w-2 animate-pulse rounded-full bg-primary" />
              <span
                className="h-2 w-2 animate-pulse rounded-full bg-primary/70"
                style={{ animationDelay: "0.2s" }}
              />
              <span
                className="h-2 w-2 animate-pulse rounded-full bg-primary/40"
                style={{ animationDelay: "0.4s" }}
              />
            </div>
            <p className="bg-gradient-to-r from-dark via-primary to-blue bg-clip-text text-body-sm font-medium text-transparent dark:from-gray-7 dark:via-primary dark:to-blue-light">
              Preparing your workspace…
            </p>
          </div>

          {/* Shimmer bar */}
          <div className="h-1 w-48 overflow-hidden rounded-full bg-stroke dark:bg-stroke-dark">
            <div
              className="h-full w-1/3 rounded-full bg-gradient-to-r from-transparent via-primary to-transparent"
              style={{
                animation:
                  "app-route-loading-shimmer 1.5s ease-in-out infinite",
              }}
            />
          </div>
        </div>
      </div>
    </>
  );
};

export default Loading;