pinafore/routes/_components/timeline/LoadingFooter.html

<div class="loading-footer {shown ? '' : 'hidden'}">
  <LoadingSpinner size={48} />
  <span class="loading-footer-info">
    Loading more...
  </span>
</div>
<style>
  .loading-footer {
    padding: 20px 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .loading-footer-info {
    margin-left: 20px;
    font-size: 1.3em;
  }
</style>
<script>
  import LoadingSpinner from '../LoadingSpinner.html'
  import { store } from '../../_store/store'

  export default {
    store: () => store,
    computed: {
      shown: ({ $timelineInitialized, $runningUpdate }) => ($timelineInitialized && $runningUpdate)
    },
    components: {
      LoadingSpinner
    }
  }
</script>