From dffe4d1d5cc52d1e0647fa8096278e03b3241989 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Mon, 2 Mar 2026 15:45:34 +0100
Subject: [PATCH] refactor(web): remove resize observer action (#26647)

---
 web/src/lib/actions/resize-observer.ts        | 43 -------------------
 .../memory-page/memory-viewer.svelte          |  4 +-
 .../lib/components/timeline/Timeline.svelte   |  5 +--
 3 files changed, 3 insertions(+), 49 deletions(-)
 delete mode 100644 web/src/lib/actions/resize-observer.ts

diff --git a/web/src/lib/actions/resize-observer.ts b/web/src/lib/actions/resize-observer.ts
deleted file mode 100644
index 4fa35c7d93..0000000000
--- a/web/src/lib/actions/resize-observer.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export type OnResizeCallback = (resizeEvent: { target: HTMLElement; width: number; height: number }) => void;
-
-let observer: ResizeObserver;
-let callbacks: WeakMap<HTMLElement, OnResizeCallback>;
-
-/**
- * Installs a resizeObserver on the given element - when the element changes
- * size, invokes a callback function with the width/height. Intended as a
- * replacement for bind:clientWidth and bind:clientHeight in svelte4 which use
- * an iframe to measure the size of the element, which can be bad for
- * performance and memory usage. In svelte5, they adapted bind:clientHeight and
- * bind:clientWidth to use an internal resize observer.
- *
- * TODO: When svelte5 is ready, go back to bind:clientWidth and
- * bind:clientHeight.
- */
-export function resizeObserver(element: HTMLElement, onResize: OnResizeCallback) {
-  if (!observer) {
-    callbacks = new WeakMap();
-    observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const onResize = callbacks.get(entry.target as HTMLElement);
-        if (onResize) {
-          onResize({
-            target: entry.target as HTMLElement,
-            width: entry.borderBoxSize[0].inlineSize,
-            height: entry.borderBoxSize[0].blockSize,
-          });
-        }
-      }
-    });
-  }
-
-  callbacks.set(element, onResize);
-  observer.observe(element);
-
-  return {
-    destroy: () => {
-      callbacks.delete(element);
-      observer.unobserve(element);
-    },
-  };
-}
diff --git a/web/src/lib/components/memory-page/memory-viewer.svelte b/web/src/lib/components/memory-page/memory-viewer.svelte
index bafd26f3d0..2098f48049 100644
--- a/web/src/lib/components/memory-page/memory-viewer.svelte
+++ b/web/src/lib/components/memory-page/memory-viewer.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/state';
-  import { resizeObserver } from '$lib/actions/resize-observer';
   import { shortcuts } from '$lib/actions/shortcut';
   import MemoryPhotoViewer from '$lib/components/memory-page/memory-photo-viewer.svelte';
   import MemoryVideoViewer from '$lib/components/memory-page/memory-video-viewer.svelte';
@@ -378,7 +377,8 @@
   id="memory-viewer"
   class="w-full bg-immich-dark-gray"
   bind:this={memoryWrapper}
-  use:resizeObserver={({ height, width }) => ((viewport.height = height), (viewport.width = width))}
+  bind:clientHeight={viewport.height}
+  bind:clientWidth={viewport.width}
 >
   {#if current}
     <ControlAppBar onClose={() => goto(Route.photos())} forceDark multiRow>
diff --git a/web/src/lib/components/timeline/Timeline.svelte b/web/src/lib/components/timeline/Timeline.svelte
index 609b5fdc13..f72ea60dca 100644
--- a/web/src/lib/components/timeline/Timeline.svelte
+++ b/web/src/lib/components/timeline/Timeline.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { afterNavigate, beforeNavigate } from '$app/navigation';
   import { page } from '$app/state';
-  import { resizeObserver, type OnResizeCallback } from '$lib/actions/resize-observer';
   import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
   import Month from '$lib/components/timeline/Month.svelte';
   import Scrubber from '$lib/components/timeline/Scrubber.svelte';
@@ -260,8 +259,6 @@
   const updateIsScrolling = () => (timelineManager.scrolling = true);
   // note: don't throttle, debounch, or otherwise do this function async - it causes flicker
 
-  const topSectionResizeObserver: OnResizeCallback = ({ height }) => (timelineManager.topSectionHeight = height);
-
   onMount(() => {
     if (!enableRouting) {
       invisible = false;
@@ -634,7 +631,7 @@
     style:height={timelineManager.totalViewerHeight + 'px'}
   >
     <section
-      use:resizeObserver={topSectionResizeObserver}
+      bind:clientHeight={timelineManager.topSectionHeight}
       class:invisible
       style:position="absolute"
       style:left="0"