Add loader component

[rbdr/forum] / src / pages / _layout.svelte

<script>
  import '$config/i18n';
  import { isLoading } from 'svelte-i18n';
  import ForumList from '$components/forum_list/forum_list.svelte';
  import Header from '$components/header/header.svelte';
  import Footer from '$components/footer/footer.svelte';
</script>

{#if $isLoading}
  <h1>Loading.</h1>
  <p>Please wait.</p>
{:else}
  <Header />
  <main>
    <slot></slot>
  </main>
  <ForumList />
  <Footer />
{/if}

<style>
  main {
    grid-column: col-start 2 / span 11;
  }

  :global(#forum) {
    display: grid;
    font-family : 'ヒラギノ明朝 ProN' , 'Hiragino Mincho ProN' , '游明朝','游明朝体',YuMincho,'Yu Mincho' , 'ＭＳ 明朝' , 'MS Mincho' , HiraMinProN-W3 , 'TakaoEx明朝' , TakaoExMincho , 'MotoyaLCedar' , 'Droid Sans Japanese' , serif;
    grid-template-columns: repeat(12, [col-start] 1fr);
    grid-gap: 20px;
    grid-auto-rows: minmax(24px, auto);
  }

  :global(body) {
    background-color: whitesmoke;
  }
</style>