Display grid placeholder when loading gallery example

examples/gallery/src/civitai.rs

@@ -13,6 +13,8 @@ pub struct Image {
 }
 
 impl Image {
+    pub const LIMIT: usize = 99;
+
     pub async fn list() -> Result<Vec<Self>, Error> {
         let client = reqwest::Client::new();
 
@@ -27,7 +29,7 @@ impl Image {
                 ("sort", "Most Reactions"),
                 ("period", "Week"),
                 ("nsfw", "None"),
-                ("limit", "99"),
+                ("limit", &Image::LIMIT.to_string()),
             ])
             .send()
             .await?

examples/gallery/src/main.rs

@@ -153,9 +153,13 @@ impl Gallery {
     }
 
     pub fn view(&self) -> Element<'_, Message> {
-        let gallery = row(self.images.iter().map(|image| {
+        let gallery = if self.images.is_empty() {
-            card(image, self.thumbnails.get(&image.id), self.now)
+            row((0..=Image::LIMIT).map(|_| placeholder()))
-        }))
+        } else {
+            row(self.images.iter().map(|image| {
+                card(image, self.thumbnails.get(&image.id), self.now)
+            }))
+        }
         .spacing(10)
         .wrap();
 
@@ -187,8 +191,8 @@ fn card<'a>(
 
     let card = mouse_area(
         container(image)
-            .width(320)
+            .width(Thumbnail::WIDTH)
-            .height(410)
+            .height(Thumbnail::HEIGHT)
             .style(container::dark),
     )
     .on_enter(Message::ThumbnailHovered(metadata.id, true))
@@ -207,6 +211,14 @@ fn card<'a>(
     }
 }
 
+fn placeholder<'a>() -> Element<'a, Message> {
+    container(horizontal_space())
+        .width(Thumbnail::WIDTH)
+        .height(Thumbnail::HEIGHT)
+        .style(container::dark)
+        .into()
+}
+
 struct Thumbnail {
     handle: image::Handle,
     fade_in: Animation<bool>,
@@ -214,6 +226,9 @@ struct Thumbnail {
 }
 
 impl Thumbnail {
+    const WIDTH: u16 = 320;
+    const HEIGHT: u16 = 410;
+
     fn new(rgba: Rgba) -> Self {
         Self {
             handle: image::Handle::from_rgba(