accordion-loader

1import { cn } from "@/lib/utils";
2 
3const ACCORDION_LOADER_BLOCKS = ["█", "▓", "▒"] as const;
4 
5type AccordionLoaderProps = React.ComponentProps<"span"> & {
6  blocks?: readonly string[];
7  track?: string;
8  trackLength?: number;
9};
10 
11function AccordionLoader({
12  className,
13  blocks = ACCORDION_LOADER_BLOCKS,
14  track = "░",
15  trackLength = 16,
16  style,
17  ...props
18}: AccordionLoaderProps) {
19  const columns = Math.max(2, Math.floor(trackLength));
20  const glyphs = ACCORDION_LOADER_BLOCKS.map(
21    (_, index) => blocks[index] ?? ACCORDION_LOADER_BLOCKS[index],
22  );
23 
24  return (
25    <>
26      <style>{`
27        @keyframes loading-ui-accordion-loader {
28          0%,
29          100% {
30            transform: translateX(0);
31          }
32 
33          50% {
34            transform: translateX(var(--loader-x));
35          }
36        }
37      `}</style>
38      <span
39        role="status"
40        className={cn(
41          "relative inline-flex h-[1em] w-[var(--loader-width)] items-center overflow-hidden font-mono text-xl leading-none text-current select-none",
42          className,
43        )}
44        style={
45          {
46            "--loader-width": `${columns}ch`,
47            "--loader-x": `${columns - 1}ch`,
48            ...style,
49          } as React.CSSProperties
50        }
51        {...props}
52      >
53        <span
54          aria-hidden="true"
55          className="pointer-events-none absolute inset-0 whitespace-nowrap"
56        >
57          {track.repeat(columns)}
58        </span>
59        {glyphs.map((glyph, index) => (
60          <span
61            key={`${glyph}-${index}`}
62            aria-hidden="true"
63            className={cn(
64              "pointer-events-none absolute top-0 left-0 flex h-full w-[1ch] items-center justify-center text-center",
65              ["z-30", "z-20", "z-10"][index],
66            )}
67            style={{
68              animation:
69                "loading-ui-accordion-loader var(--duration, 2.8s) ease-in-out infinite",
70              animationDelay: `calc(var(--delay, 0.04s) * ${index})`,
71              backgroundColor: "var(--mask-color, var(--background))",
72            }}
73          >
74            {glyph}
75          </span>
76        ))}
77        <span className="sr-only">Loading</span>
78      </span>
79    </>
80  );
81}
82 
83export { AccordionLoader };