Pinafore-Web-Client-Frontend/routes/_components/LoadingPage.html

<div class="loading-page {shown ? '' : 'hidden'}">
  <LoadingSpinner />
</div>
<style>
  .loading-page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    transition: opacity 0.25s linear;
  }
</style>
<script>
  import LoadingSpinner from './LoadingSpinner.html'

  const SPINNER_DELAY = 700

  export default {
    oncreate () {
      setTimeout(() => {
        this.set({ shown: true })
      }, SPINNER_DELAY)
    },
    data: () => ({
      shown: false
    }),
    components: {
      LoadingSpinner
    }
  }
</script>