fn-design-system/components/skeleton.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant, source_repo, source_license, source_file

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant	source_repo	source_license	source_file
skeleton	component	ts	ui	1.0.0	impure	Skeleton(props: HTMLAttributes<HTMLDivElement>): JSX.Element	Sistema de loading skeletons: base, text, card, avatar, button, table. Variantes preconfiguradas para estados de carga. Mantine Skeleton.	skeleton loading placeholder component ui mantine				false		@mantine/core	Componente Skeleton que renderiza placeholder de carga con 6 variantes preconfiguradas (text, card, avatar, button, table)	false			frontend/functions/ui/skeleton.tsx	name type required description className string false Clases CSS adicionales name type required description lines number false Número de líneas (SkeletonText, default 3) name type required description rows number false Filas de tabla (SkeletonTable, default 5) name type required description columns number false Columnas de tabla (SkeletonTable, default 4) name type required description size 'xs' | 'sm' | 'md' | 'lg' | 'xl' false Tamaño del avatar (SkeletonAvatar, default md)		false	react	base text card avatar button table	https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library	MIT	frontend/src/components/ui/skeleton.tsx

Ejemplo

<SkeletonCard />
<SkeletonText lines={4} />
<SkeletonTable rows={10} columns={5} />
<SkeletonAvatar size="lg" />
<SkeletonButton />

Notas

Exporta 6 variantes preconfiguradas. Todas componen sobre Mantine Skeleton con animacion nativa. La ultima linea de SkeletonText se acorta a 80% para simular texto real. SkeletonCard incluye imagen (180px) + dos lineas de texto. SkeletonAvatar usa circle para forma redonda.