feat: lazily load media

frontend/esbuild.js

···
       };
       const url = new URL(`http://localhost${req.url}`);
       const route =
-        url.pathname === "/" || url.pathname === "/dev/am-auth-flow"
+        url.pathname === "/" ||
+        url.pathname === "/dev/am-auth-flow" ||
+        url.pathname.startsWith("/media/")
           ? { hostname: "127.0.0.1", port: 8080 }
           : { hostname: hosts[0], port };
       const routedOptions = { ...options, ...route };

frontend/package.json

···
     "url": "https://github.com/ivomurrell/myivo.git"
   },
   "dependencies": {
-    "htmx.org": "^2.0.6",
+    "htmx.org": "^2.0.8",
     "tailwindcss": "^4.1.12"
   },
   "volta": {

frontend/src/css/tailwind.css

···
 @source ".";
 
 @source inline("hoverable:grid-cols-{1..3}");
-@source inline("peer/{1..3}");
-@source inline("peer-hover/{1..3}:block");
+@source inline("peer/{game,film,song}");
+@source inline("peer-hover/{game,film,song}:block");
 
 @custom-variant hoverable (@media (hover: hover));

package-lock.json

···
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
-        "htmx.org": "^2.0.6",
+        "htmx.org": "^2.0.8",
         "tailwindcss": "^4.1.12"
       },
       "devDependencies": {
···
         "typescript": "^5.9.2",
         "typescript-eslint": "^8.41.0"
       }
+    },
+    "frontend/node_modules/htmx.org": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.8.tgz",
+      "integrity": "sha512-fm297iru0iWsNJlBrjvtN7V9zjaxd+69Oqjh4F/Vq9Wwi2kFisLcrLCiv5oBX0KLfOX/zG8AUo9ROMU5XUB44Q==",
+      "license": "0BSD"
     },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.9",
···
       "engines": {
         "node": ">=8"
       }
-    },
-    "node_modules/htmx.org": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.6.tgz",
-      "integrity": "sha512-7ythjYneGSk3yCHgtCnQeaoF+D+o7U2LF37WU3O0JYv3gTZSicdEFiI/Ai/NJyC5ZpYJWMpUb11OC5Lr6AfAqA==",
-      "license": "0BSD"
     },
     "node_modules/ignore": {
       "version": "5.3.2",
···
         "eslint": "^9.34.0",
         "eslint-config-prettier": "^10.1.8",
         "globals": "^16.3.0",
-        "htmx.org": "^2.0.6",
+        "htmx.org": "^2.0.8",
         "minimist": "^1.2.8",
         "tailwindcss": "^4.1.12",
         "typescript": "^5.9.2",
         "typescript-eslint": "^8.41.0"
+      },
+      "dependencies": {
+        "htmx.org": {
+          "version": "2.0.8",
+          "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.8.tgz",
+          "integrity": "sha512-fm297iru0iWsNJlBrjvtN7V9zjaxd+69Oqjh4F/Vq9Wwi2kFisLcrLCiv5oBX0KLfOX/zG8AUo9ROMU5XUB44Q=="
+        }
       }
     },
     "balanced-match": {
···
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
-    },
-    "htmx.org": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/htmx.org/-/htmx.org-2.0.6.tgz",
-      "integrity": "sha512-7ythjYneGSk3yCHgtCnQeaoF+D+o7U2LF37WU3O0JYv3gTZSicdEFiI/Ai/NJyC5ZpYJWMpUb11OC5Lr6AfAqA=="
     },
     "ignore": {
       "version": "5.3.2",

server/Cargo.lock

···
 checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
 
 [[package]]
-name = "ahash"
-version = "0.8.12"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a15f179cd60c4584b8a8c596927aadc462e27f2ca70c04e0071964a73ba7a75"
-dependencies = [
- "cfg-if",
- "once_cell",
- "version_check",
- "zerocopy",
-]
-
-[[package]]
 name = "alloc-no-stdlib"
 version = "2.0.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 dependencies = [
  "alloc-no-stdlib",
 ]
-
-[[package]]
-name = "allocator-api2"
-version = "0.2.21"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "683d7910e743518b0e34f1186f92494becacb047c7b6bf616c96772180fef923"
 
 [[package]]
 name = "anyhow"
···
  "tokio",
  "zstd",
  "zstd-safe",
-]
-
-[[package]]
-name = "async-trait"
-version = "0.1.89"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9035ad2d096bed7955a320ee7e2230574d28fd3c3a0f186cbea1ff3c7eed5dbb"
-dependencies = [
- "proc-macro2",
- "quote",
- "syn",
 ]
 
 [[package]]
···
 checksum = "d71b6127be86fdcfddb610f7182ac57211d4b18a3e9c82eb2d17662f2227ad6a"
 
 [[package]]
-name = "cached"
-version = "0.56.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "801927ee168e17809ab8901d9f01f700cd7d8d6a6527997fee44e4b0327a253c"
-dependencies = [
- "ahash",
- "async-trait",
- "cached_proc_macro",
- "cached_proc_macro_types",
- "futures",
- "hashbrown",
- "once_cell",
- "thiserror",
- "tokio",
- "web-time",
-]
-
-[[package]]
-name = "cached_proc_macro"
-version = "0.25.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9225bdcf4e4a9a4c08bf16607908eb2fbf746828d5e0b5e019726dbf6571f201"
-dependencies = [
- "darling",
- "proc-macro2",
- "quote",
- "syn",
-]
-
-[[package]]
-name = "cached_proc_macro_types"
-version = "0.1.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ade8366b8bd5ba243f0a58f036cc0ca8a2f069cff1a2351ef1cac6b083e16fc0"
-
-[[package]]
 name = "cc"
 version = "1.2.34"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 ]
 
 [[package]]
-name = "darling"
-version = "0.20.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc7f46116c46ff9ab3eb1597a45688b6715c6e628b5c133e288e709a29bcb4ee"
-dependencies = [
- "darling_core",
- "darling_macro",
-]
-
-[[package]]
-name = "darling_core"
-version = "0.20.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0d00b9596d185e565c2207a0b01f8bd1a135483d02d9b7b0a54b11da8d53412e"
-dependencies = [
- "fnv",
- "ident_case",
- "proc-macro2",
- "quote",
- "strsim",
- "syn",
-]
-
-[[package]]
-name = "darling_macro"
-version = "0.20.11"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc34b93ccb385b40dc71c6fceac4b2ad23662c7eeb248cf10d529b7e055b6ead"
-dependencies = [
- "darling_core",
- "quote",
- "syn",
-]
-
-[[package]]
 name = "deranged"
 version = "0.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 checksum = "3f9eec918d3f24069decb9af1554cad7c880e2da24a9afd88aca000531ab82c1"
 
 [[package]]
-name = "foldhash"
-version = "0.1.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d9c4f5dac5e15c24eb999c26181a6ca40b39fe946cbe4c263c7209467bc83af2"
-
-[[package]]
 name = "foreign-types"
 version = "0.3.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 ]
 
 [[package]]
-name = "futures"
-version = "0.3.31"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "65bc07b1a8bc7c85c5f2e110c476c7389b4554ba72af57d8445ea63a576b0876"
-dependencies = [
- "futures-channel",
- "futures-core",
- "futures-io",
- "futures-sink",
- "futures-task",
- "futures-util",
-]
-
-[[package]]
 name = "futures-channel"
 version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "2dff15bf788c671c1934e366d07e30c1814a8ef514e1af724a602e8a2fbe1b10"
 dependencies = [
  "futures-core",
- "futures-sink",
 ]
 
 [[package]]
···
 checksum = "05f29059c0c2090612e8d742178b0580d2dc940c837851ad723096f87af6663e"
 
 [[package]]
-name = "futures-io"
-version = "0.3.31"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9e5c1b78ca4aae1ac06c48a526a655760685149f0d465d21f37abfe57ce075c6"
-
-[[package]]
 name = "futures-sink"
 version = "0.3.31"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 checksum = "9fa08315bb612088cc391249efdc3bc77536f16c91f6cf495e6fbe85b20a4a81"
 dependencies = [
  "futures-core",
- "futures-sink",
  "futures-task",
  "pin-project-lite",
  "pin-utils",
···
 version = "0.15.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "9229cfe53dfd69f0609a49f65461bd93001ea1ef889cd5529dd176593f5338a1"
-dependencies = [
- "allocator-api2",
- "equivalent",
- "foldhash",
-]
+
+[[package]]
+name = "heck"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
 
 [[package]]
 name = "html5ever"
···
 ]
 
 [[package]]
-name = "ident_case"
-version = "1.0.1"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b9e0384b61958566e926dc50660321d12159025e767c18e043daf26b70104c39"
-
-[[package]]
 name = "idna"
 version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
  "anyhow",
  "askama",
  "axum",
- "cached",
  "jsonwebtoken",
  "rand 0.9.2",
  "reqwest",
  "scraper",
  "serde",
+ "strum",
  "tokio",
  "tower",
  "tower-http",
···
 ]
 
 [[package]]
-name = "strsim"
-version = "0.11.1"
+name = "strum"
+version = "0.27.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7da8b5736845d9f2fcb837ea5d9e2628564b3b043a70948a3f0b778838c5fb4f"
+checksum = "af23d6f6c1a224baef9d3f61e287d2761385a5b88fdab4eb4c6f11aeb54c4bcf"
+dependencies = [
+ "strum_macros",
+]
+
+[[package]]
+name = "strum_macros"
+version = "0.27.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7695ce3845ea4b33927c055a39dc438a45b059f7c1b3d91d38d10355fb8cbca7"
+dependencies = [
+ "heck",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
 
 [[package]]
 name = "subtle"
···
 checksum = "accd4ea62f7bb7a82fe23066fb0957d48ef677f6eeb8215f372f52e48bb32426"
 
 [[package]]
-name = "version_check"
-version = "0.9.5"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
-
-[[package]]
 name = "want"
 version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
···
 version = "0.3.77"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "33b6dd2ef9186f1f2072e409e99cd22a975331a6b3591b12c764e0e55c60d5d2"
-dependencies = [
- "js-sys",
- "wasm-bindgen",
-]
-
-[[package]]
-name = "web-time"
-version = "1.1.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5a6580f308b1fad9207618087a65c04e7a10bc77e02c8e84e9b00dd4b12fa0bb"
 dependencies = [
  "js-sys",
  "wasm-bindgen",

server/Cargo.toml

···
 anyhow = "1.0.57"
 askama = "0.14.0"
 axum = "0.8.1"
-cached = { version = "0.56.0", features = ["async"] }
 jsonwebtoken = "9.3.1"
 rand = "0.9.2"
 reqwest = { version = "0.12.23", features = ["json"] }
 scraper = "0.24.0"
 serde = { version = "1.0.219", features = ["derive"] }
+strum = { version = "0.27.2", features = ["derive"] }
 tokio = { version = "1.18.2", features = ["full"] }
 tower = "0.5.2"
 tower-http = { version = "0.6.2", features = ["compression-full", "fs", "trace", "set-header"] }

server/src/index.rs

···
-use crate::scrapers::{
-    Media,
-    apple_music::{self, AppleMusicClient},
-    backloggd, letterboxd,
-};
+use std::sync::Arc;
+
+use crate::scrapers::{Media, MediaType, apple_music::AppleMusicClient, backloggd, letterboxd};
 
 use askama::Template;
 use rand::seq::IndexedRandom;
···
     mock: bool,
 }
 
+type MediaList = [(MediaType, Option<Media>); 3];
+
 #[derive(Template, Debug, Clone)]
 #[template(path = "index.html")]
 pub struct RootTemplate {
-    media: Vec<Media>,
+    media: MediaList,
     consumption_verb: &'static str,
 }
 
 impl RootTemplate {
-    pub async fn new(
-        apple_music_client: &AppleMusicClient,
-        #[allow(unused_variables)] options: IndexOptions,
+    pub fn new(
+        apple_music_client: Arc<AppleMusicClient>,
+        #[allow(unused_variables)] options: &IndexOptions,
     ) -> RootTemplate {
         #[cfg(debug_assertions)]
         let media = if options.mock {
             mocked_media()
         } else {
-            Self::fetch_media(apple_music_client).await
+            Self::fetch_media(apple_music_client)
         };
         #[cfg(not(debug_assertions))]
-        let media = Self::fetch_media(apple_music_client).await;
+        let media = Self::fetch_media(apple_music_client);
 
         let consumption_verb = Self::random_consumption_verb();
 
···
         }
     }
 
-    async fn fetch_media(apple_music_client: &AppleMusicClient) -> Vec<Media> {
-        let (game, movie, song) = tokio::join!(
-            backloggd::cached_fetch(),
-            letterboxd::cached_fetch(),
-            apple_music::cached_fetch(apple_music_client)
-        );
-        [game, movie, song].into_iter().flatten().collect()
+    fn fetch_media(apple_music_client: Arc<AppleMusicClient>) -> MediaList {
+        [
+            (MediaType::Game, backloggd::try_cached_fetch()),
+            (MediaType::Film, letterboxd::try_cached_fetch()),
+            (MediaType::Song, apple_music_client.try_cached_fetch()),
+        ]
     }
 
     fn random_consumption_verb() -> &'static str {
···
 }
 
 #[cfg(debug_assertions)]
-fn mocked_media() -> Vec<Media> {
-    vec![
-        Media {
+fn mocked_media() -> MediaList {
+    [
+        (MediaType::Game, Some(Media {
             name: "Cyberpunk 2077: Ultimate Edition".to_owned(),
             image: "https://images.igdb.com/igdb/image/upload/t_cover_big/co7iy1.jpg".to_owned(),
             context: "Nintendo Switch 2".to_owned(),
             url: Some("https://backloggd.com/u/cherryfunk/logs/cyberpunk-2077-ultimate-edition/".to_owned())
-        },
-        Media {
+        })),
+        (MediaType::Film, Some(Media {
             name: "The Thursday Murder Club".to_owned(),
             image: "https://a.ltrbxd.com/resized/film-poster/6/6/6/2/8/6/666286-the-thursday-murder-club-0-230-0-345-crop.jpg?v=4bfeae38a7".to_owned(),
             context: "1 star".to_owned(),
             url: Some("https://letterboxd.com/ivom/film/the-thursday-murder-club/".to_owned())
-        },
-        Media {
+        })),
+        (MediaType::Song, Some(Media {
             name: "We Might Feel Unsound".to_owned(),
             image: "https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/f4/b2/8e/f4b28ee4-01c6-232c-56a7-b97fd5b0e0ae/00602527857671.rgb.jpg/240x240bb.jpg".to_owned(),
             context: "James Blake — James Blake".to_owned(),
             url: None
-        },
+        })),
     ]
 }

server/src/main.rs

···
 #[cfg(debug_assertions)]
 mod am_auth_flow;
 mod index;
+mod media;
 mod scrapers;
 
 use std::{net::SocketAddr, sync::Arc};
···
 #[cfg(debug_assertions)]
 use crate::am_auth_flow::AuthFlowTemplate;
 use crate::index::{IndexOptions, RootTemplate};
-use crate::scrapers::apple_music::AppleMusicClient;
+use crate::media::{MediaTemplate, fetch_media_of_type};
+use crate::scrapers::{MediaType, apple_music::AppleMusicClient};
 
 use askama::Template;
 use axum::{
     Router,
-    extract::{Query, State},
+    extract::{Path, Query, State},
     http::{HeaderName, HeaderValue, StatusCode},
     response::{Html, IntoResponse},
     routing::{get, get_service},
···
     let apple_music_client = Arc::new(AppleMusicClient::new()?);
     let state = AppState { apple_music_client };
 
-    let app = Router::new().route("/", get(render_index_handler));
+    let app = Router::new()
+        .route("/", get(render_index_handler))
+        .route("/media/{media_type}", get(render_media_partial_handler));
     #[cfg(debug_assertions)]
     let app = app.route("/dev/am-auth-flow", get(render_apple_music_auth_flow));
     let app = app
···
     Query(options): Query<IndexOptions>,
     State(state): State<AppState>,
 ) -> impl IntoResponse {
-    let template = RootTemplate::new(&state.apple_music_client, options).await;
+    let template = RootTemplate::new(state.apple_music_client, &options);
     template.render().map(Html).map_err(|err| {
         tracing::error!("failed to render index: {err:?}");
+        StatusCode::INTERNAL_SERVER_ERROR
+    })
+}
+
+async fn render_media_partial_handler(
+    Path(media_type): Path<MediaType>,
+    State(state): State<AppState>,
+) -> impl IntoResponse {
+    let media = fetch_media_of_type(media_type, state.apple_music_client)
+        .await
+        .unwrap();
+    let template = MediaTemplate { media_type, media };
+    template.render().map(Html).map_err(|err| {
+        tracing::error!("failed to render {media_type} media: {err:?}");
         StatusCode::INTERNAL_SERVER_ERROR
     })
 }

server/src/media.rs

···
+use std::sync::Arc;
+
+use crate::scrapers::{Media, MediaType, apple_music::AppleMusicClient, backloggd, letterboxd};
+
+use askama::Template;
+
+#[derive(Template, Debug, Clone)]
+#[template(path = "media.html")]
+pub struct MediaTemplate {
+    pub media_type: MediaType,
+    pub media: Media,
+}
+
+pub async fn fetch_media_of_type(
+    media_type: MediaType,
+    apple_music_client: Arc<AppleMusicClient>,
+) -> Option<Media> {
+    match media_type {
+        MediaType::Game => backloggd::cached_fetch().await,
+        MediaType::Film => letterboxd::cached_fetch().await,
+        MediaType::Song => apple_music_client.cached_fetch().await,
+    }
+}

server/src/scrapers.rs

···
+pub mod cached;
+
 pub mod apple_music;
 pub mod backloggd;
 pub mod letterboxd;
 
+use serde::Deserialize;
+use strum::{Display, EnumString};
+
 #[derive(Debug, Clone)]
 pub struct Media {
     pub name: String,
···
     pub context: String,
     pub url: Option<String>,
 }
+
+#[derive(Debug, Clone, Copy, Display, EnumString, Deserialize)]
+#[strum(serialize_all = "snake_case")]
+#[serde(rename_all = "snake_case")]
+pub enum MediaType {
+    Game,
+    Film,
+    Song,
+}

server/src/scrapers/apple_music.rs

···
-use std::{env, fs, time::Duration};
+use std::{env, fs, sync::Arc, time::Duration};
 
 use anyhow::Context;
-use cached::proc_macro::once;
 use jsonwebtoken::{Algorithm, EncodingKey, Header};
 use reqwest::Client;
 use serde::{Deserialize, Serialize};
+use tokio::sync::RwLock;
 
-use super::Media;
+use super::{
+    Media,
+    cached::{MediaCache, cache_or_fetch, try_cache_or_fetch},
+};
+
+static TTL: Duration = Duration::from_secs(30);
 
 #[derive(Serialize, Debug, Clone)]
 struct Claims {
···
 }
 
 pub struct AppleMusicClient {
+    cache: MediaCache,
     http_client: Client,
     key_id: String,
     team_id: String,
···
 
 impl AppleMusicClient {
     pub fn new() -> anyhow::Result<Self> {
+        let cache = Arc::new(RwLock::new(None));
         let key_id =
             env::var("APPLE_DEVELOPER_TOKEN_KEY_ID").context("missing apple developer key ID")?;
         let team_id =
···
         let user_token = env::var("APPLE_USER_TOKEN").context("missing apple user token")?;
 
         Ok(Self {
+            cache,
             http_client: Client::new(),
             key_id,
             team_id,
···
         })
     }
 
+    pub fn try_cached_fetch(self: Arc<Self>) -> Option<Media> {
+        try_cache_or_fetch(&self.cache.clone(), TTL, async move || self.fetch().await)
+    }
+
+    pub async fn cached_fetch(self: Arc<Self>) -> Option<Media> {
+        cache_or_fetch(&self.cache.clone(), TTL, async move || self.fetch().await).await
+    }
+
     pub fn build_developer_token(&self) -> anyhow::Result<String> {
         let mut header = Header::new(Algorithm::ES256);
         header.kid = Some(self.key_id.clone());
···
             .context("failed to encode apple developer JWT")
     }
 }
-
-#[once(time = 30, option = false)]
-pub async fn cached_fetch(this: &AppleMusicClient) -> Option<Media> {
-    this.fetch()
-        .await
-        .map_err(|error| tracing::warn!(?error, "failed to call Apple Music"))
-        .ok()
-}

server/src/scrapers/backloggd.rs

···
-use std::{sync::LazyLock, time::Duration};
+use std::{
+    sync::{Arc, LazyLock},
+    time::Duration,
+};
 
 use anyhow::Context;
-use cached::proc_macro::once;
 use reqwest::Url;
 use scraper::{Html, Selector};
+use tokio::sync::RwLock;
 
-use super::Media;
+use super::{
+    Media,
+    cached::{MediaCache, cache_or_fetch, try_cache_or_fetch},
+};
 
 pub async fn fetch() -> anyhow::Result<Media> {
     static FIRST_ENTRY_SEL: LazyLock<Selector> =
···
     })
 }
 
-#[once(time = 300, option = false)]
+static CACHE: LazyLock<MediaCache> = LazyLock::new(|| Arc::new(RwLock::new(None)));
+static TTL: Duration = Duration::from_secs(300);
+pub fn try_cached_fetch() -> Option<Media> {
+    try_cache_or_fetch(&CACHE, TTL, fetch)
+}
 pub async fn cached_fetch() -> Option<Media> {
-    fetch()
-        .await
-        .map_err(|error| tracing::warn!(?error, "failed to scrape Backloggd"))
-        .ok()
+    cache_or_fetch(&CACHE, TTL, fetch).await
 }

server/src/scrapers/cached.rs

···
+use std::{
+    sync::Arc,
+    time::{Duration, Instant},
+};
+use tokio::sync::RwLock;
+
+use super::Media;
+
+#[derive(Debug)]
+pub struct CachedMediaResult {
+    media_result: Option<Media>,
+    cache_time: Instant,
+    ttl: Duration,
+}
+
+impl CachedMediaResult {
+    fn has_expired(&self) -> bool {
+        let ttl = if self.media_result.is_some() {
+            self.ttl
+        } else {
+            Duration::from_secs(30)
+        };
+        self.cache_time.elapsed() >= ttl
+    }
+}
+
+pub type MediaCache = Arc<RwLock<Option<CachedMediaResult>>>;
+
+pub fn try_cache_or_fetch<F, Fut>(cache: &MediaCache, ttl: Duration, fetcher: F) -> Option<Media>
+where
+    F: FnOnce() -> Fut + Send + 'static,
+    Fut: Future<Output = anyhow::Result<Media>> + Send,
+{
+    {
+        let cached = cache.try_read().ok()?;
+        if let Some(cached) = &*cached
+            && !cached.has_expired()
+        {
+            return cached.media_result.clone();
+        }
+    }
+
+    let cache = cache.clone();
+    tokio::spawn(async move {
+        synced_fetch(&cache, ttl, fetcher).await;
+    });
+
+    None
+}
+
+pub async fn cache_or_fetch<F, Fut>(cache: &MediaCache, ttl: Duration, fetcher: F) -> Option<Media>
+where
+    F: FnOnce() -> Fut,
+    Fut: Future<Output = anyhow::Result<Media>>,
+{
+    {
+        let cached = cache.read().await;
+        if let Some(cached) = &*cached
+            && !cached.has_expired()
+        {
+            return cached.media_result.clone();
+        }
+    }
+
+    synced_fetch(cache, ttl, fetcher).await
+}
+
+async fn synced_fetch<F, Fut>(cache: &MediaCache, ttl: Duration, fetcher: F) -> Option<Media>
+where
+    F: FnOnce() -> Fut,
+    Fut: Future<Output = anyhow::Result<Media>>,
+{
+    let mut cached = cache.write().await;
+    if let Some(cached) = &*cached
+        && !cached.has_expired()
+    {
+        return cached.media_result.clone();
+    }
+
+    let result = fetcher()
+        .await
+        .map_err(|error| tracing::warn!(?error, "failed to scrape backend"))
+        .ok();
+    *cached = Some(CachedMediaResult {
+        media_result: result.clone(),
+        cache_time: Instant::now(),
+        ttl,
+    });
+    result
+}

server/src/scrapers/letterboxd.rs

···
-use std::{sync::LazyLock, time::Duration};
+use std::{
+    sync::{Arc, LazyLock},
+    time::Duration,
+};
 
 use anyhow::Context;
-use cached::proc_macro::once;
 use reqwest::{Client, Url};
 use scraper::{ElementRef, Html, Selector};
 use serde::Deserialize;
+use tokio::sync::RwLock;
 
-use super::Media;
+use super::{
+    Media,
+    cached::{MediaCache, cache_or_fetch, try_cache_or_fetch},
+};
 
 #[derive(Deserialize, Debug, Clone)]
 pub struct ImageUrlMetadata {
···
     Ok(image_url)
 }
 
-#[once(time = 1800, option = false)]
+static CACHE: LazyLock<MediaCache> = LazyLock::new(|| Arc::new(RwLock::new(None)));
+static TTL: Duration = Duration::from_secs(1800);
+pub fn try_cached_fetch() -> Option<Media> {
+    try_cache_or_fetch(&CACHE, TTL, fetch)
+}
 pub async fn cached_fetch() -> Option<Media> {
-    fetch()
-        .await
-        .map_err(|error| tracing::warn!(?error, "failed to scrape Letterboxd"))
-        .ok()
+    cache_or_fetch(&CACHE, TTL, fetch).await
 }

server/templates/index.html

···
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="build/app.css" />
     <link rel="me" href="https://hachyderm.io/@cherry" />
-    <script defer src="build/app.js" type="module"></script>
+    <script src="build/app.js" type="module"></script>
   </head>
   <body class="bg-gray-900">
     <div class="flex flex-col">
···
           <span class="text-pink-700">cherry</span>.computer
         </h1>
       </div>
-      <div class="m-4 flex max-w-2xl flex-col items-center gap-4 self-center">
+      <div
+        class="flex w-full max-w-2xl flex-col items-center gap-4 self-center p-4"
+      >
         <div
           class="max-w-xl text-justify font-mono text-2xl text-pink-100 uppercase"
         >
···
             interrogate the apparent complex further.
           </p>
         </div>
-        {% if media.len() > 0 -%}
         <h2 class="self-start text-3xl text-pink-50">
           Here is what I've {{ consumption_verb }} most recently:
         </h2>
-        <div class="grid grid-cols-2 hoverable:grid-cols-{{ media.len() }}">
-          {% for media in media -%} {% include "media.html" %} {%- endfor %}
+        <div
+          class="grid gap-4 w-full grid-cols-2 hoverable:grid-cols-{{ media.len() }}"
+        >
+          {% for media in media -%} {% match media %} {% when (media_type,
+          Some(media)) %} {% include "media.html" %} {% when (media_type, None)
+          %}
+          <div
+            class="aspect-square w-full max-w-50 animate-pulse justify-self-center rounded-xs bg-gray-800 hoverable:max-w-none"
+            hx-get="/media/{{ media_type }}"
+            hx-swap="outerHTML"
+            hx-trigger="load"
+          ></div>
+          <div
+            id="media-description-{{ media_type }}"
+            class="hoverable:hidden"
+          ></div>
+          {% endmatch %} {%- endfor %}
         </div>
-        {%- endif %}
         <p class="font-mono text-3xl text-pink-50">Free Palestine 🇵🇸</p>
       </div>
     </div>

server/templates/media.html

···
 {% else %}
 <div
 {% endif %}
-    class="peer/{{ loop.index }} relative m-2 aspect-square max-h-50 justify-self-center">
+    class="peer/{{ media_type }} relative aspect-square max-h-50 justify-self-center hoverable:max-h-none">
   <img
     class="absolute inset-0 aspect-square rounded-xs object-fill"
     aria-hidden="true"
···
 {% else %}
 <div
 {% endif %}
-  class="mx-2 mt-4 flex flex-col self-center peer-hover/{{ loop.index }}:block hoverable:col-span-full hoverable:row-2 hoverable:hidden"
+  id="media-description-{{ media_type }}"
+  class="mx-2 mt-4 flex flex-col self-center peer-hover/{{ media_type }}:block hoverable:col-span-full hoverable:row-2 hoverable:hidden"
+  hx-swap-oob="true"
 >
   <p class="text-2xl text-white">{{ media.name }}</p>
   <p class="text-xl text-gray-700 italic">{{ media.context }}</p>