simple layout and css

src/views/ArticleView.vue

@@ -8,9 +8,11 @@ import { dateFromParts, simpleDateFormat } from '@lib/dates'
 import { NAME, REPOSITORY, VERSION } from '@lib/meta'
 
 const article = ref<Article | null>(null)
+const loading = ref<Boolean>(true)
 const route = useRoute()
 
 async function loadPage(target: RouteLocation) {
+  loading.value = true
   article.value = await loadArticle(
     dateFromParts(
       target.params.year as string,
@@ -18,6 +20,7 @@ async function loadPage(target: RouteLocation) {
       target.params.day as string,
     ),
   )
+  loading.value = false
 }
 
 function scrollTop() {
@@ -29,7 +32,10 @@ onBeforeRouteUpdate(loadPage)
 </script>
 
 <template>
-  <template v-if="!article">
+  <template v-if="loading">
+    <main></main>
+  </template>
+  <template v-else-if="!article">
     <NotFoundView />
   </template>
   <template v-else>
@@ -42,19 +48,19 @@ onBeforeRouteUpdate(loadPage)
           {{ simpleDateFormat(article.metadata.date) }}
         </span>
       </div>
-      <img :src="article.metadata.thumbnail" alt="thumbnail" />
+      <img id="thumbnail" :src="article.metadata.thumbnail" alt="thumbnail" />
+      <div id="text" v-html="article.html"></div>
+      <div id="signature">TODO signature</div>
+      <br />
+      <a @click.prevent="scrollTop" href="#">Go to top</a> -
+      <RouterLink to="/">Back to home</RouterLink>
+      <hr />
+      <footer>
+        <small>
+          {{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
+          {{ VERSION }}
+        </small>
+      </footer>
     </main>
-    <div id="text" v-html="article.html"></div>
-    <div id="signature">TODO signature</div>
-    <br />
-    <a @click.prevent="scrollTop" href="#">Go to top</a> -
-    <RouterLink to="/">Back to home</RouterLink>
-    <hr />
-    <footer>
-      <small>
-        {{ new Date().getFullYear() }} - Made with <a :href="REPOSITORY">{{ NAME }}</a>
-        {{ VERSION }}
-      </small>
-    </footer>
   </template>
 </template>