From 71dda7cbc0f41c096f71633587ee12676bb3ee5b Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Sat, 29 Nov 2025 05:39:40 +0200
Subject: [PATCH] extracted avatar preloader

---
 src/components/posts/PostHeader.svelte |  6 +++---
 src/skythread.js                       | 18 ------------------
 src/types.d.ts                         |  1 -
 src/utils.ts                           |  1 +
 src/utils/avatar_preloader.ts          | 15 +++++++++++++++
 5 files changed, 19 insertions(+), 22 deletions(-)
 create mode 100644 src/utils/avatar_preloader.ts

diff --git a/src/components/posts/PostHeader.svelte b/src/components/posts/PostHeader.svelte
index 6187a3f..a6d7807 100644
--- a/src/components/posts/PostHeader.svelte
+++ b/src/components/posts/PostHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getPostContext } from './PostComponent.svelte';
+  import { avatarPreloader } from '../../utils.js';
   import { PostPresenter } from '../../utils/post_presenter.js';
   import PostSubtreeLink from './PostSubtreeLink.svelte';
 
@@ -10,11 +11,10 @@
 
   $effect(() => {
     if (avatar) {
-      let av = avatar;
-      window.avatarPreloader.observe(av);
+      avatarPreloader.observe(avatar);
 
       return () => {
-        window.avatarPreloader.unobserve(av);
+        avatar && avatarPreloader.unobserve(avatar);
       }
     }
   });
diff --git a/src/skythread.js b/src/skythread.js
index 6fbd65e..2df4e99 100644
--- a/src/skythread.js
+++ b/src/skythread.js
@@ -26,8 +26,6 @@ let biohazardDialog;
 
 
 function init() {
-  window.avatarPreloader = buildAvatarPreloader();
-
   svelte.mount(AccountMenu, { target: $id('account_menu_wrap') });
 
   for (let dialog of document.querySelectorAll('.dialog')) {
@@ -73,22 +71,6 @@ function parseQueryParams() {
   }
 }
 
-/** @returns {IntersectionObserver} */
-
-function buildAvatarPreloader() {
-  return new IntersectionObserver((entries, observer) => {
-    for (const entry of entries) {
-      if (entry.isIntersecting) {
-        const img = entry.target;
-        img.removeAttribute('lazy');
-        observer.unobserve(img);
-      }
-    }
-  }, {
-    rootMargin: '1000px 0px'
-  });
-}
-
 function showSearch() {
   let search = $id('search');
   svelte.mount(HomeSearch, { target: search });
diff --git a/src/types.d.ts b/src/types.d.ts
index 0b1ab0d..20c72ab 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -9,7 +9,6 @@ declare var accountAPI: import("./api/authenticated_api.js").AuthenticatedAPI;
 declare var blueAPI: import("./api/bluesky_api.js").BlueskyAPI;
 declare var appView: import("./api/bluesky_api.js").BlueskyAPI;
 declare var api: import("./api/bluesky_api.js").BlueskyAPI;
-declare var avatarPreloader: IntersectionObserver;
 
 type json = Record<string, any>;
 
diff --git a/src/utils.ts b/src/utils.ts
index 0fc4046..655cb83 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,5 @@
 export * from './utils/at_uri.js';
+export * from './utils/avatar_preloader.js';
 export * from './utils/text.js';
 
 export function $id<T>(name: string, type?: new (...args: any[]) => T): T {
diff --git a/src/utils/avatar_preloader.ts b/src/utils/avatar_preloader.ts
new file mode 100644
index 0000000..9499c64
--- /dev/null
+++ b/src/utils/avatar_preloader.ts
@@ -0,0 +1,15 @@
+function buildAvatarPreloader(): IntersectionObserver {
+  return new IntersectionObserver((entries, observer) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting) {
+        const img = entry.target;
+        img.removeAttribute('lazy');
+        observer.unobserve(img);
+      }
+    }
+  }, {
+    rootMargin: '1000px 0px'
+  });
+}
+
+export let avatarPreloader = buildAvatarPreloader();
-- 
2.51.2