search tags

loading placeholder items

AobaClient/src/components/media_grid.rs

@@ -52,7 +52,7 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 				div {
 					class: "mediaGrid",
 					{result.items.iter().map(|itm| rsx!{
-						MediaItem { item: itm.clone() }
+						MediaItem { item: Some(itm.clone()) }
 					})},
 				}
 			},
@@ -68,9 +68,9 @@ pub fn MediaGrid(props: MediaGridProps) -> Element {
 		None => rsx! {
 			div{
 				class: "mediaGrid",
-				div {
-					"Loading..."
-				}
+				{(0..50).map(|_| rsx!{
+					MediaItem {}
+				})}
 			}
 		},
 	}

AobaClient/src/components/media_item.rs

@@ -4,26 +4,41 @@ use crate::{HOST, rpc::aoba::MediaModel};
 
 #[derive(PartialEq, Clone, Props)]
 pub struct MediaItemProps {
-	pub item: MediaModel,
+	pub item: Option<MediaModel>,
 }
 
 #[component]
 pub fn MediaItem(props: MediaItemProps) -> Element {
-	let mtype = props.item.media_type().as_str_name();
-	let filename = props.item.file_name;
-	let id = props.item.media_id.unwrap().value;
+	if let Some(item) = props.item {
+		let mtype = item.media_type().as_str_name();
+		let filename = item.file_name;
+		let id = item.media_id.unwrap().value;
 
-	let src = format!("{HOST}/m/thumb/{id}");
-	rsx! {
-		a { class: "mediaItem", href: "{HOST}/m/{id}", target: "_blank",
-			img { src }
-			span { class: "info",
-				span { class: "name", "{filename}" }
-				span { class: "details",
-					span { "{mtype}" }
-					span { "{props.item.view_count}" }
+		let src = format!("{HOST}/m/thumb/{id}");
+		return rsx! {
+			a { class: "mediaItem", href: "{HOST}/m/{id}", target: "_blank",
+				img { src }
+				span { class: "info",
+					span { class: "name", "{filename}" }
+					span { class: "details",
+						span { "{mtype}" }
+						span { "{item.view_count}" }
+					}
 				}
 			}
-		}
+		};
+	} else {
+		return rsx! {
+			div { class: "mediaItem placeholder",
+				img { },
+				span { class: "info",
+					span { class: "name" }
+					span { class: "details",
+						span { }
+						span { }
+					}
+				}
+			}
+		};
 	}
 }