pinafore/routes/_components/virtualList/VirtualListFooter.html

<div class="virtual-list-footer"
  ref:node
  style="transform: translateY({$heightWithoutFooter}px);" >
  <svelte:component this={component} />
</div>
<style>
  .virtual-list-footer {
    position: absolute;
    top: 0;
    width: 100%;
  }
</style>
<script>
  import { virtualListStore } from './virtualListStore'
  import { mark, stop } from '../../_utils/marks'

  export default {
    oncreate () {
      requestAnimationFrame(() => {
        let node = this.refs.node
        if (!node) {
          return
        }

        mark('VirtualListFooter gBCR')
        let rect = node.getBoundingClientRect()
        stop('VirtualListFooter gBCR')
        this.store.setForRealm({footerHeight: rect.height})
      })
    },
    store: () => virtualListStore
  }
</script>