4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 52:Tf19,"use client"; import { useCallback, useEffect, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const CHARSETS = { symbols: "!@#$%^&*()_+-=[]{}|;:,.<>?/~", binary: "01", hex: "0123456789ABCDEF", }; type DisplayChar = { char: string; resolved: boolean; }; export type LoaderTerminalDecodeProps = { text?: string; speed?: number; charset?: "symbols" | "binary" | "hex"; loop?: boolean; className?: string; }; export function LoaderTerminalDecode({ text = "LOADING", speed = 30, charset = "symbols", loop = true, className, }: LoaderTerminalDecodeProps) { const [displayChars, setDisplayChars] = useState([]); const rafRef = useRef(null); const startTimeRef = useRef(0); const lastResolveTimeRef = useRef(0); const resolvedCountRef = useRef(0); const isWaitingRef = useRef(false); const waitStartRef = useRef(0); const chars = CHARSETS[charset]; const getRandomChar = useCallback( () => chars[Math.floor(Math.random() * chars.length)], [chars], ); const reset = useCallback(() => { setDisplayChars( text.split("").map((char) => ({ char: char === " " ? " " : getRandomChar(), resolved: char === " ", })), ); resolvedCountRef.current = text.split("").filter((c) => c === " ").length; lastResolveTimeRef.current = 0; isWaitingRef.current = false; }, [text, getRandomChar]); useEffect(() => { reset(); startTimeRef.current = performance.now(); const animate = (currentTime: number) => { const elapsed = currentTime - startTimeRef.current; if (isWaitingRef.current) { if (currentTime - waitStartRef.current >= 1500) { reset(); startTimeRef.current = currentTime; lastResolveTimeRef.current = 0; } rafRef.current = requestAnimationFrame(animate); return; } const shouldResolveNext = resolvedCountRef.current < text.length && elapsed - lastResolveTimeRef.current >= speed; setDisplayChars((prev) => prev.map((item, index) => { if (item.resolved) { return item; } if (text[index] === " ") { return { char: " ", resolved: true }; } if (shouldResolveNext && index === resolvedCountRef.current) { lastResolveTimeRef.current = elapsed; resolvedCountRef.current++; return { char: text[index], resolved: true }; } return { char: getRandomChar(), resolved: false }; }), ); if (resolvedCountRef.current >= text.length) { if (loop) { isWaitingRef.current = true; waitStartRef.current = currentTime; } } rafRef.current = requestAnimationFrame(animate); }; rafRef.current = requestAnimationFrame(animate); return () => { if (rafRef.current !== null) { cancelAnimationFrame(rafRef.current); } }; }, [text, speed, loop, reset, getRandomChar]); return ( {text} ); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://www.tryelements.dev/r/loader-terminal-decode.json","proxyUrl":"https://shadcnregistry.com/r/elements/loader-terminal-decode","itemId":"@elements/loader-terminal-decode"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"registry/default/blocks/loaders/loader-terminal-decode/components/elements/loader-terminal-decode.tsx","content":"$52","type":"registry:component"}]}]]}],"$L53"]}]

Terminal Decode Loader

Installation

Files

components

Styles