Border Trail Loading Card Demo

1"use client";
2 
3import { cn } from "@/lib/utils";
4import { useState } from "react";
5import { BorderTrail } from "@/components/sora-ui/effects/border-trail";
6 
7export interface BorderTrailLoadingCardProps {
8  size?: number;
9}
10 
11/** motion-primitives `border-trail-card-2` */
12export function BorderTrailLoadingCard({
13  size = 120,
14}: BorderTrailLoadingCardProps) {
15  const [isLoading, setIsLoading] = useState(false);
16  const [isVisible, setIsVisible] = useState(true);
17 
18  const handleAnimationComplete = () => {
19    setIsLoading(false);
20    setTimeout(() => setIsVisible(false), 300);
21  };
22 
23  const handleLoad = () => {
24    setIsLoading(true);
25    setIsVisible(true);
26  };
27 
28  return (
29    <div className="relative h-[200px] w-[300px] rounded-md border border-zinc-300/40 bg-zinc-100 px-4 py-3 dark:border-zinc-700/40 dark:bg-zinc-900">
30      {isVisible ? (
31        <BorderTrail
32          className={cn(
33            "bg-linear-to-l from-green-300 via-green-500 to-green-300 transition-opacity duration-300 dark:from-green-700/30 dark:via-green-500 dark:to-green-700/30",
34            isLoading ? "opacity-100" : "opacity-0"
35          )}
36          onAnimationComplete={handleAnimationComplete}
37          size={size}
38          transition={{
39            duration: 4,
40            ease: [0, 0.5, 0.8, 0.5],
41            repeat: 2,
42          }}
43        />
44      ) : null}
45      <div className="flex h-full flex-col items-end justify-end">
46        <button
47          aria-label="Load"
48          className="relative ml-1 flex h-8 scale-100 select-none appearance-none items-center justify-center rounded-lg border border-zinc-950/10 bg-white px-2 text-sm text-zinc-500 focus-visible:ring-2 active:scale-[0.96] dark:border-zinc-50/10"
49          onClick={handleLoad}
50          type="button"
51        >
52          Submit
53        </button>
54      </div>
55    </div>
56  );
57}
58 
59export default BorderTrailLoadingCard;