Make images suspending

src/App.vue

@@ -137,7 +137,7 @@
             return {
               "--tw-bg-opacity": 0,
               "--tw-backdrop-blur": 0,
-              transition: "background 500ms ease, backdrop-filter 200ms linear",
+              transition: "background 200ms ease, backdrop-filter 200ms linear",
               pointerEvents: "none"
             }
           }

src/components/BlurredBlobCanvas.vue

@@ -3,9 +3,7 @@
 </template>
 
 <script>
-  import blobsAnimate from "blobs/v2/animate/index.js"
+  import { canvasPath as createBlobAnimation } from "blobs/v2/animate/index.module.js"
-  const { canvasPath: createBlobAnimation } = blobsAnimate
-
   import { ref, watchEffect } from "vue"
   import { useRafFn } from "@vueuse/core"
 

src/components/SuspendingImage.vue

@@ -0,0 +1,44 @@
+<template>
+  <img :src="objectUrl" :alt="alt">
+</template>
+
+<style module>
+
+</style>
+
+<script>
+  import { $fetch } from "ohmyfetch"
+
+  const waitForAnimationFrame = () => new Promise(resolve => requestAnimationFrame(resolve))
+
+  const asyncSetup = async src => {
+    const blob = await $fetch(src)
+    await waitForAnimationFrame()
+    return {
+      objectUrl: URL.createObjectURL(blob)
+    }
+  }
+
+  export default {
+    name: "SuspendingImage",
+    props: {
+      src: {
+        type: String,
+        required: true
+      },
+      alt: {
+        type: String,
+        required: true
+      }
+    },
+    setup(props) {
+      if (typeof window === "undefined") {
+        return {
+          objectUrl: props.src
+        }
+      } else {
+        return asyncSetup(props.src)
+      }
+    }
+  }
+</script>

src/pages/photography.vue

@@ -6,11 +6,11 @@
         :key="photo.file"
         class="flex -lg:space-y-10 lg:space-x-10 -lg:flex-col -lg:items-center"
       >
-        <img
+        <SuspendingImage
           :src="`/photography/${photo.file}`"
-          :alt="photo.title"
+          :alt="photo.altText"
           class="w-full lg:max-w-150 max-h-80vh block object-contain"
-        >
+        />
         <div>
           <div class="text-gray-400">
             {{ photo.date }}
@@ -35,10 +35,11 @@
   import TopBarLayout from "../components/TopBarLayout.vue"
   import { photos } from "../photos"
   import XSpacer from "../components/XSpacer.vue"
+  import SuspendingImage from "../components/SuspendingImage.vue"
 
   export default {
     name: "PhotographyPage",
-    components: { XSpacer, TopBarLayout },
+    components: { SuspendingImage, XSpacer, TopBarLayout },
     setup() {
 
       return {

src/photos.ts

@@ -1,14 +1,24 @@
-export const photos = [
+interface Photo {
+  file: string
+  title: string
+  altText: string
+  date: string
+  description: string
+}
+
+export const photos: Photo[] = [
   {
-    "file": "Late_afternoon.webp",
+    file: "Late_afternoon.webp",
-    "title": "Late afternoon",
+    title: "Late afternoon",
-    "date": "2019",
+    altText: "A red house in London",
-    "description": "Taken in London during a sunny afternoon.\nSeems to be 65 Curzon St."
+    date: "2019",
+    description: "Taken in London during a sunny afternoon.\nSeems to be 65 Curzon St."
   },
   {
-    "file": "Martyrdom.webp",
+    file: "Martyrdom.webp",
-    "title": "Martyrdom",
+    title: "Martyrdom",
-    "date": "2019",
+    altText: "A church on a vineyard",
-    "description": "The Sankt-Laurentius church right by the Mosel river in Bremm (Germany)."
+    date: "2019",
+    description: "The Sankt-Laurentius church right by the Mosel river in Bremm (Germany)."
   }
 ]