Archipelago — open-source initial import

aiui/packages/app/src/composables/useLazyImage.ts

@@ -0,0 +1,40 @@
+import { ref, onMounted, onUnmounted, type Ref } from 'vue'
+
+const PLACEHOLDER = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMWExYTFhIi8+PC9zdmc+'
+
+export function useLazyImage(imageRef: Ref<HTMLImageElement | null>, src: string) {
+  const isLoaded = ref(false)
+  const currentSrc = ref(PLACEHOLDER)
+  let observer: IntersectionObserver | null = null
+
+  function onLoad() {
+    isLoaded.value = true
+  }
+
+  onMounted(() => {
+    const el = imageRef.value
+    if (!el) return
+
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            currentSrc.value = src
+            el.src = src
+            el.addEventListener('load', onLoad, { once: true })
+            observer?.disconnect()
+          }
+        }
+      },
+      { rootMargin: '200px' }
+    )
+
+    observer.observe(el)
+  })
+
+  onUnmounted(() => {
+    observer?.disconnect()
+  })
+
+  return { isLoaded, currentSrc, placeholder: PLACEHOLDER }
+}