From 73c361344aa544b13ad0cb06115cefee9d351199 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritzruth.de>
Date: Sat, 18 Dec 2021 19:36:41 +0100
Subject: [PATCH] Make images suspending

---
 src/App.vue                          |  2 +-
 src/components/BlurredBlobCanvas.vue |  4 +--
 src/components/SuspendingImage.vue   | 44 ++++++++++++++++++++++++++++
 src/pages/photography.vue            |  9 +++---
 src/photos.ts                        | 28 ++++++++++++------
 5 files changed, 70 insertions(+), 17 deletions(-)
 create mode 100644 src/components/SuspendingImage.vue

diff --git a/src/App.vue b/src/App.vue
index aaa0c7b..0765381 100644
--- a/src/App.vue
+++ b/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"
             }
           }
diff --git a/src/components/BlurredBlobCanvas.vue b/src/components/BlurredBlobCanvas.vue
index 7c3d5c6..bb13650 100644
--- a/src/components/BlurredBlobCanvas.vue
+++ b/src/components/BlurredBlobCanvas.vue
@@ -3,9 +3,7 @@
 </template>
 
 <script>
-  import blobsAnimate from "blobs/v2/animate/index.js"
-  const { canvasPath: createBlobAnimation } = blobsAnimate
-
+  import { canvasPath as createBlobAnimation } from "blobs/v2/animate/index.module.js"
   import { ref, watchEffect } from "vue"
   import { useRafFn } from "@vueuse/core"
 
diff --git a/src/components/SuspendingImage.vue b/src/components/SuspendingImage.vue
new file mode 100644
index 0000000..9de6864
--- /dev/null
+++ b/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>
diff --git a/src/pages/photography.vue b/src/pages/photography.vue
index 7fb0f9c..fffc067 100644
--- a/src/pages/photography.vue
+++ b/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 {
diff --git a/src/photos.ts b/src/photos.ts
index 2ed203d..af8b09c 100644
--- a/src/photos.ts
+++ b/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",
-    "title": "Late afternoon",
-    "date": "2019",
-    "description": "Taken in London during a sunny afternoon.\nSeems to be 65 Curzon St."
+    file: "Late_afternoon.webp",
+    title: "Late afternoon",
+    altText: "A red house in London",
+    date: "2019",
+    description: "Taken in London during a sunny afternoon.\nSeems to be 65 Curzon St."
   },
   {
-    "file": "Martyrdom.webp",
-    "title": "Martyrdom",
-    "date": "2019",
-    "description": "The Sankt-Laurentius church right by the Mosel river in Bremm (Germany)."
+    file: "Martyrdom.webp",
+    title: "Martyrdom",
+    altText: "A church on a vineyard",
+    date: "2019",
+    description: "The Sankt-Laurentius church right by the Mosel river in Bremm (Germany)."
   }
 ]