Preserve Element Height when re-mounting to the DOM

[enesbala5]

I was wondering if there is any native way to handle my case:

• I have a feed which displays a list of Posts
• Each Post has Media, the height of which we don't know until they're rendered
• Each Post has a description which could also be of varying heights

The issue I am facing now is when scrolling up, the jitter is immense, probably from the vast difference of the initial size of the element w/ the new size (incl. Description & Media).

Is there any way to preserve the "final" height that each element takes, or do I have to build that logic on my own - essentially duplicating the height measurement code?

---

I already looked at this function and it seems like removing the cleanup callback would "fix" my issue:

src/core/resizer.ts

/**
 * @internal
 */
export const createResizer = (
  store: VirtualStore,
  isHorizontal: boolean
): ListResizer => {
  let viewportElement: HTMLElement | undefined;
  const sizeKey = isHorizontal ? "width" : "height";
  const mountedIndexes = new WeakMap<Element, number>();

  const resizeObserver = createResizeObserver((entries) => {
    const resizes: ItemResize[] = [];
    for (const { target, contentRect } of entries) {
      // Skip zero-sized rects that may be observed under `display: none` style
      if (!(target as HTMLElement).offsetParent) continue;

      if (target === viewportElement) {
        store.$update(ACTION_VIEWPORT_RESIZE, contentRect[sizeKey]);
      } else {
        const index = mountedIndexes.get(target);
        if (index != NULL) {
          resizes.push([index, contentRect[sizeKey]]);
        }
      }
    }

    if (resizes.length) {
      store.$update(ACTION_ITEM_RESIZE, resizes);
    }
  });

  return {
    $observeRoot(viewport: HTMLElement) {
      resizeObserver._observe((viewportElement = viewport));
    },
    $observeItem: (el: HTMLElement, i: number) => {
      mountedIndexes.set(el, i);
      resizeObserver._observe(el);
      return () => {
        mountedIndexes.delete(el);
        resizeObserver._unobserve(el);
      };
    },
    $dispose: resizeObserver._dispose,
  };
};

Edit: It seems that the cache defined at cache.ts stores the sizes of each element - I'm just wondering if there is a way to only "keep" the biggest size, basically not resizing down to a smaller size once the item is remounted.

[enesbala5]

@inokawa I would really appreciate your input here, seeing how you're the core maintainer. Thanks a lot in advance!

[enesbala5]

I understand & thank you for the reply!

I think I found a much easier solution however, if I understand the documentation correctly.

It seems that the getItemSize function can "solve" this issue of me needing to duplicate the observer logic & skip the overhead - however with the Window Virtualizer (at least on Svelte), it's impossible to access the method. Access to thestore would be ideal - possibly through a callback like onStoreInit.
Technically it would only add a single prop & 1 function on the component itself, and allow for all the versatility the user could need. It could also be just a simple $bindable() update, like so:

Old Code:

let { props } = $props()

 const store = createVirtualStore(
    data.length,
    itemSize,
    overscan,
    undefined,
    undefined,
    !itemSize
  );

New Code:

  let { 
	...props
	store = $bindable(createVirtualStore(
		data.length,
		itemSize,
		overscan,
		undefined,
		undefined,
		!itemSize
	))
  }: Props = $props();

Is that plausible to implement?

[enesbala5]

@inokawa Sorry to bother, but I am now almost done implementing the changes and about to open the PR.

I am only implementing the binding on the WindowVirtualizer, but I'm happy to add it to the normal Visualizer as well. Just let me know if that's something you want me to do. The binding is working great and it can eliminate much of the verbose code such as the one pictured below.

All the code above can be replaced with this:

<script>
	...
	
	let store: VirtualStore | undefined = $state();
</script>

<WindowVirtualizer {data} getKey={(_, i) => i} bind:store>
	...
</WindowVirtualizer>

---

Edit: PR is live: #730 - please take a look whenever you can, hopefully should not take much time to review

I've also added a Storybook example named "WindowVirtualizerWithBindings" so you can look at how the user would utilize it.

[inokawa]

These are internal APIs, and should not be exposed directly.

[enesbala5]

@inokawa I understand they're internal, but the API is very limited right now, at least on the WindowVirtualizer. What's the harm to making the store and scroller accessible to the user as well. If they don't want to use them, they don't have to...

[inokawa]

The limited functionality is for maintainability and changeability. If you need more features, @tanstack/svelte-virtual might fit more.

For this usecase, I think exposing getItemSize is OK because Virtualizer already exposes.