Merge pull request #80 from picture-pro/79-optimize-photo-component

79 optimize photo component

crates/bl/src/fetch.rs

@@ -141,7 +141,10 @@ pub async fn fetch_photo_thumbnail(
       .ok_or_eyre("Thumbnail artifact is missing contents")?;
 
     use base64::prelude::*;
-    let data = BASE64_STANDARD.encode(&thumbnail_artifact_content);
+    let data = format!(
+      "data:image/png;base64,{}",
+      BASE64_STANDARD.encode(&thumbnail_artifact_content)
+    );
 
     Ok(Some(PhotoThumbnailDisplayParams {
       data,

crates/core_types/src/photo.rs

@@ -111,7 +111,7 @@ pub enum PhotoGroupStatus {
 /// The display parameters for a photo thumbnail. Not a table.
 #[derive(Clone, Debug, Deserialize, Serialize)]
 pub struct PhotoThumbnailDisplayParams {
-  /// The base64-encoded image data.
+  /// The base64-encoded image data, with the `data:image...` prefix.
   pub data: String,
   /// The alt text for the image.
   pub alt:  String,

crates/site-app/src/components/photo.rs

@@ -41,18 +41,16 @@ pub fn Photo(
   #[prop(default = "rounded-box")] rounded: &'static str,
   #[prop(default = "")] extra_class: &'static str,
 ) -> impl IntoView {
-  let photo = create_resource(
-    move || (),
-    move |_| bl::fetch::fetch_photo_thumbnail(photo_id),
-  );
+  let photo =
+    create_resource(move || photo_id, bl::fetch::fetch_photo_thumbnail);
 
   view! {
     <Suspense fallback=|| view!{ }>
       { move || match photo() {
         Some(Ok(Some(photo))) => {
           Some(view! {
             <img
-              src={format!("data:image/png;base64,{}", photo.data)} alt={photo.alt}
+              src={photo.data} alt={photo.alt}
               width={size.physical(photo.size).0} height={size.physical(photo.size).1}
               class={format!("{rounded} {extra_class}")}
             />

fly.toml

@@ -12,6 +12,10 @@ kill_timeout = "5s"
   app = "site-server"
   surreal = "surreal start --log=info --auth --bind '[::]':8000 file:/data/srdb.db"
 
+[[vm]]
+  memory = "1GB"
+  processes = ["app"]
+
 [env]
   SURREAL_WS_URL = "picturepro-mono.internal:8000"
   # these are fine in plain text because surreal is not exposed