pinafore/routes/_components/virtualList/VirtualListHeader.html

<div class="virtual-list-header {shown ? 'shown' : ''} {fadedIn ? 'faded-in' : ''}"
     ref:node >
  <svelte:component this={component} {virtualProps} />
</div>
<style>
  .virtual-list-header {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    z-index: 10;
    transition: none;
    display: none;
  }
  .virtual-list-header.shown {
    display: block;
    transition: opacity 0.333s linear;
  }
  .virtual-list-header.faded-in {
    opacity: 1;
  }
</style>
<script>
  import { virtualListStore } from './virtualListStore'
  import { doubleRAF } from '../../_utils/doubleRAF'
  import { mark, stop } from '../../_utils/marks'
  import { observe } from 'svelte-extras'

  export default {
    oncreate () {
      this.observe('shown', shown => {
        if (shown) {
          this.doCalculateHeight()
          doubleRAF(() => this.set({fadedIn: true})) //  animate in
        } else {
          this.set({fadedIn: false})
        }
      }, {init: false})
    },
    data: () => ({
      fadedIn: false
    }),
    store: () => virtualListStore,
    methods: {
      observe,
      doCalculateHeight () {
        let { heightCalculated } = this.get()
        if (heightCalculated) { // only need to calculate once, it never changes
          return
        }
        this.set({heightCalculated: true})
        requestAnimationFrame(() => {
          mark('VirtualListHeader gBCR')
          let rect = this.refs.node.getBoundingClientRect()
          stop('VirtualListHeader gBCR')
          this.store.setForRealm({headerHeight: rect.height})
        })
      }
    }
  }
</script>