initial commit

Signed-off-by: NotAShelf <raf@notashelf.dev>
Change-Id: I4a6b498153eccd5407510dd541b7f4816a6a6964

crates/pinakes-ui/src/components/loading.rs

@@ -0,0 +1,59 @@
+use dioxus::prelude::*;
+
+#[component]
+pub fn SkeletonCard() -> Element {
+    rsx! {
+        div { class: "skeleton-card",
+            div { class: "skeleton-thumb skeleton-pulse" }
+            div { class: "skeleton-text skeleton-pulse" }
+            div { class: "skeleton-text skeleton-text-short skeleton-pulse" }
+        }
+    }
+}
+
+#[component]
+pub fn SkeletonRow() -> Element {
+    rsx! {
+        div { class: "skeleton-row",
+            div { class: "skeleton-cell skeleton-cell-icon skeleton-pulse" }
+            div { class: "skeleton-cell skeleton-cell-wide skeleton-pulse" }
+            div { class: "skeleton-cell skeleton-pulse" }
+            div { class: "skeleton-cell skeleton-pulse" }
+        }
+    }
+}
+
+#[component]
+pub fn LoadingOverlay(message: Option<String>) -> Element {
+    let msg = message.unwrap_or_else(|| "Loading...".to_string());
+    rsx! {
+        div { class: "loading-overlay",
+            div { class: "loading-spinner" }
+            span { class: "loading-message", "{msg}" }
+        }
+    }
+}
+
+#[component]
+pub fn SkeletonGrid(count: Option<usize>) -> Element {
+    let n = count.unwrap_or(12);
+    rsx! {
+        div { class: "media-grid",
+            for i in 0..n {
+                SkeletonCard { key: "skel-{i}" }
+            }
+        }
+    }
+}
+
+#[component]
+pub fn SkeletonList(count: Option<usize>) -> Element {
+    let n = count.unwrap_or(10);
+    rsx! {
+        div { class: "media-list",
+            for i in 0..n {
+                SkeletonRow { key: "skel-row-{i}" }
+            }
+        }
+    }
+}