1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
use crate::icon::{Icon, IconKind};
use dioxus::prelude::*;
/// Semi-transparent backdrop with animated spinner positioned over containers to block interaction during async operations.
#[component]
pub fn LoadingOverlay(
/// Whether the loading overlay is currently active.
visible: bool,
/// Backdrop blur radius in pixels. Defaults to 3px.
#[props(default = 3)]
blur_px: u32,
/// Size of the central animated spinner icon in pixels. Defaults to 32px.
#[props(default = 32)]
loader_size: u32,
/// Optional status description text rendered below the spinner.
#[props(default)]
description: Option<String>,
/// Additional CSS classes for the root container.
#[props(default)]
class: String,
/// Content wrapped by the loading overlay.
#[props(default)]
children: Element,
) -> Element {
let backdrop_style = format!("backdrop-filter: blur({blur_px}px); -webkit-backdrop-filter: blur({blur_px}px);");
rsx! {
div { class: "sd-loading-overlay-wrapper {class}",
{children}
if visible {
div {
class: "sd-loading-overlay",
style: "{backdrop_style}",
"aria-busy": "true",
"aria-live": "polite",
div { class: "sd-loading-overlay-content",
div { class: "sd-loading-spinner animate-spin text-purple-400",
Icon { kind: IconKind::Spinner, size: loader_size }
}
if let Some(desc) = description {
p { class: "sd-loading-overlay-desc", "{desc}" }
}
}
}
}
}
}
}