Render header photo in place details

Shows the blurhash and fades in the image once downloaded

app/modifiers/fade-in-image.js

@@ -0,0 +1,30 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [url]) => {
+  if (!url) return;
+
+  // Remove classes when URL changes
+  element.classList.remove('loaded');
+  element.classList.remove('loaded-instant');
+
+  // Create an off-DOM image to reliably check cache status
+  // without waiting for the actual DOM element to load it
+  const img = new Image();
+  img.src = url;
+
+  if (img.complete) {
+    // Already in browser cache, skip the animation
+    element.classList.add('loaded-instant');
+    return;
+  }
+
+  const handleLoad = () => {
+    element.classList.add('loaded');
+  };
+
+  element.addEventListener('load', handleLoad);
+
+  return () => {
+    element.removeEventListener('load', handleLoad);
+  };
+});