Loom Loader

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface LoomLoaderProps extends React.ComponentProps<"div"> {
8  /** How many warp threads are on the frame. Three to seven reads best. */
9  strands?: number
10  /** Milliseconds for one thread to be drawn through and pulled off. */
11  duration?: number
12  /** Announced to screen readers while the loader is on screen. */
13  label?: string
14}
15 
16/** The frame the threads are strung across, in user units. */
17const BOX = 40
18const INSET = 5
19 
20/**
21 * Warp threads are drawn with `pathLength="1"`, so the dash animation is
22 * written in fractions of a line rather than in pixels and the same keyframes
23 * hold at any size.
24 */
25export function LoomLoader({
26  strands = 5,
27  duration = 1400,
28  label = "Loading",
29  className,
30  style,
31  ...props
32}: LoomLoaderProps) {
33  const positions = React.useMemo(() => {
34    const span = BOX - INSET * 2
35    const gap = strands > 1 ? span / (strands - 1) : 0
36    return Array.from({ length: strands }, (_, index) => INSET + index * gap)
37  }, [strands])
38 
39  return (
40    <div
41      data-slot="loom-loader"
42      role="status"
43      aria-label={label}
44      className={cn("text-primary inline-block size-10", className)}
45      style={
46        { "--loom-duration": `${duration}ms`, ...style } as React.CSSProperties
47      }
48      {...props}
49    >
50      <svg
51        viewBox={`0 0 ${BOX} ${BOX}`}
52        fill="none"
53        aria-hidden="true"
54        className="size-full overflow-visible"
55      >
56        {positions.map((x, index) => (
57          <line
58            key={x}
59            x1={x}
60            y1={INSET}
61            x2={x}
62            y2={BOX - INSET}
63            pathLength={1}
64            stroke="currentColor"
65            strokeWidth={2}
66            strokeLinecap="round"
67            strokeOpacity={0.3}
68            // Drawn whole at rest, so a reduced-motion frame is a woven glyph
69            // rather than an empty box.
70            strokeDasharray={1}
71            className="animate-loom-thread motion-reduce:animate-none"
72            style={{
73              // Threads start one after another, which is what turns five
74              // lines into a weave instead of five lines blinking together.
75              animationDelay: `${(index / strands) * duration * 0.6}ms`,
76            }}
77          />
78        ))}
79 
80        {/* The shuttle. It carries the weft across the warp and back. */}
81        <line
82          x1={INSET}
83          y1={INSET - 1}
84          x2={INSET}
85// … truncated