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>