fn-design-system/components/loading_overlay.md

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

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	framework	props	output	tested	tests	test_file_path	file_path	emits	has_state	variant
loading_overlay	component	ts	ui	1.0.0	impure	FnLoadingOverlay(props: FnLoadingOverlayProps): JSX.Element	Overlay de carga con blur y opacidad configurable. Wrapper sobre Mantine LoadingOverlay.	mantine loading overlay spinner component ui				false		@mantine/core	react	name type required description visible boolean true Controla visibilidad del overlay name type required description loaderSize number | string false Tamano del loader/spinner name type required description overlayBlur number false Intensidad del blur del fondo, default 2 name type required description overlayOpacity number false Opacidad del overlay, default 0.5	Overlay semi-transparente con spinner centrado que cubre el contenedor padre	false			frontend/functions/ui/loading_overlay.tsx		false

Ejemplo

import { FnLoadingOverlay } from '@fn_library'

<Box pos="relative">
  <FnLoadingOverlay visible={loading} overlayBlur={3} />
  <DataTable data={rows} />
</Box>

Notas

Wrapper sobre Mantine LoadingOverlay. El contenedor padre necesita position: relative para que el overlay se posicione correctamente. Usa loaderProps y overlayProps internamente para mapear las props simplificadas.