From e255e6bd2747b283c36aa923126aa9a50337f034 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Sat, 5 Nov 2022 04:22:27 -0400
Subject: [PATCH] [+] Add loading

---
 src/components/Loading.vue | 30 +++++++++++++++++++++
 src/css/loading.svg        | 54 ++++++++++++++++++++++++++++++++++++++
 src/views/About.vue        |  8 +++---
 src/views/Blog.vue         |  6 +++--
 4 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Loading.vue
 create mode 100644 src/css/loading.svg

diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 0000000..a7d9454
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,30 @@
+<template>
+    <div id="Loading">
+        <img src="../css/loading.svg" alt="loading">
+        <div class="text">Loading~</div>
+    </div>
+</template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+@Options({components: {}})
+export default class Loading extends Vue
+{
+}
+</script>
+
+<style lang="sass" scoped>
+#Loading
+    width: 100%
+    height: 100%
+    display: flex
+    flex-direction: column
+    align-items: center
+    justify-content: center
+    //background: white
+    //opacity: 0.6
+    img
+        width: 150px
+    .text
+        margin-top: 20px
+</style>
diff --git a/src/css/loading.svg b/src/css/loading.svg
new file mode 100644
index 0000000..f8356d4
--- /dev/null
+++ b/src/css/loading.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<!DOCTYPE svg>
+<svg xmlns="http://www.w3.org/2000/svg" style="margin:auto;display:block;"
+    width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+
+    <g>
+        <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.1s"></animateTransform>
+        <circle cx="50" cy="50" r="39.891" stroke="#ffc254" stroke-width="14.4" fill="none" stroke-dasharray="0 300">
+            <animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
+        </circle>
+        <circle cx="50" cy="50" r="39.891" stroke="#fff1cf" stroke-width="7.2" fill="none" stroke-dasharray="0 300">
+            <animate attributeName="stroke-dasharray" values="15 300;55.1413599195142 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
+        </circle>
+        <circle cx="50" cy="50" r="32.771" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
+            <animate attributeName="stroke-dasharray" values="15 300;45.299378454348094 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
+        </circle>
+        <circle cx="50" cy="50" r="47.171" stroke="#000000" stroke-width="1" fill="none" stroke-dasharray="0 300">
+            <animate attributeName="stroke-dasharray" values="15 300;66.03388996804073 300;15 300" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite" calcMode="linear" keySplines="0 0.4 0.6 1;0.4 0 1 0.6" begin="-0.046s"></animate>
+        </circle>
+    </g>
+    <g>
+        <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1"></animateTransform>
+
+        <path fill="#ffc254" stroke="#000000" d="M97.2,50c0,6.1-1.2,12.2-3.5,17.8l-13.3-5.4c1.6-3.9,2.4-8.2,2.4-12.4"></path>
+        <path fill="#fff1cf" transform="translate(0,-0.1)" d="M93.6,50c0,1.2,0,2.4-0.1,3.6L93,57.2c-0.4,2-2.3,3.3-4.2,2.8l-0.2-0.1c-1.8-0.5-3.1-2.3-2.7-3.9l0.4-3 c0.1-1,0.1-2,0.1-3"></path>
+        <path fill="#ffc254" stroke="#000000" d="M85.4,62.5c-0.2,0.7-0.5,1.4-0.8,2.1c-0.3,0.7-0.6,1.4-0.9,2c-0.6,1.1-2,1.4-3.2,0.8v0c-1.1-0.7-1.7-2-1.2-2.9 c0.3-0.6,0.5-1.2,0.8-1.8c0.2-0.6,0.6-1.2,0.7-1.8"></path>
+        <path fill="#ffc254" stroke="#000000" d="M94.5,65.7c-0.3,0.9-0.7,1.7-1,2.6c-0.4,0.8-0.7,1.7-1.1,2.5c-0.7,1.4-2.3,1.9-3.4,1.3l0,0 c-1.1-0.7-1.5-2.2-0.9-3.4c0.4-0.8,0.7-1.5,1-2.3c0.3-0.8,0.7-1.5,0.9-2.3"></path>
+        <path fill="#ffc254" stroke="#000000" d="M85.6,67c0,0.8,0.1,1.6,0.3,2.4c0.6-0.5,1.1-1,1.4-1.7c0.2-0.7,0.2-1.5-0.1-2.2C86.5,64,85.6,66.3,85.6,67z"></path>
+
+    </g>
+    <g>
+        <animateTransform attributeName="transform" type="rotate" values="360 50 50;0 50 50" keyTimes="0;1" dur="1s" repeatCount="indefinite" calcMode="spline" keySplines="0.5 0 0.5 1" begin="-0.1s"></animateTransform>
+
+        <path fill="#fff1cf" stroke="#000000" d="M91,33.6l-10,4c-0.4-1.2-1.1-2.4-1.7-3.5c-0.2-0.5,0.3-1.1,0.9-1C83.6,32.9,87.4,32.9,91,33.6z"></path>
+        <path fill="#fff1cf" stroke="#000000" d="M83.2,36.7l10-4c-0.6-1.7-1.5-3.3-2.3-4.9c-0.3-0.7-1.2-0.6-1.4,0.1C87.6,31.1,85.7,34,83.2,36.7z"></path>
+        <path fill="#ffc254" stroke="#000000" transform="translate(0,0.2)" d="M82.8,50c0-3.4-0.5-6.8-1.5-10c-0.2-0.8-0.4-1.5-0.3-2.3c0.1-0.8,0.4-1.6,0.7-2.4c0.7-1.5,1.9-3.1,3.7-4l0,0 c1.8-0.9,3.7-1,5.6-0.3c0.9,0.4,1.7,1,2.4,1.8c0.7,0.8,1.3,1.7,1.7,2.8c1.5,4.6,2.2,9.5,2.2,14.4"></path>
+        <path fill="#fff1cf" transform="translate(0,0.3)" d="M86.4,50l0-0.9l-0.1-0.9l-0.1-1.9c0-0.9,0.2-1.7,0.7-2.3c0.5-0.7,1.3-1.2,2.3-1.4l0.3,0c0.9-0.2,1.9,0,2.6,0.6 c0.7,0.5,1.3,1.4,1.4,2.4l0.2,2.2l0.1,1.1l0,1.1"></path>
+        <path fill="#000000" d="M88.6,36.6c0.1,0.3-0.2,0.7-0.6,0.8c-0.5,0.2-0.9,0-1.1-0.3c-0.1-0.3,0.2-0.7,0.6-0.8C88,36.1,88.5,36.2,88.6,36.6z"></path>
+        <path fill="none" stroke="#000000" d="M86,38.7c0.2,0.6,0.8,0.9,1.4,0.7c0.6-0.2,0.9-0.9,0.6-2.1c0.3,1.2,1,1.7,1.6,1.5c0.6-0.2,0.9-0.8,0.8-1.4"></path>
+        <path fill="#ffc254" stroke="#000000" d="M86.8,42.2l0.4,2.2c0.1,0.4,0.1,0.7,0.2,1.1l0.1,1.1c0.1,1.2-0.9,2.3-2.2,2.3h0c-1.3,0-2.5-0.8-2.5-1.9l-0.1-1 c0-0.3-0.1-0.6-0.2-1l-0.3-1.9"></path>
+        <path fill="#ffc254" stroke="#000000" d="M96.2,40.2l0.5,2.7c0.1,0.5,0.2,0.9,0.2,1.4l0.1,1.4c0.1,1.5-0.9,2.8-2.2,2.8c-1.3,0-2.5-1.1-2.6-2.4l-0.1-1.2 c0-0.4-0.1-0.8-0.2-1.2l-0.4-2.5"></path>
+        <path fill="none" stroke="#000000" d="M90.9,36.4c1.1-1.1,2.7-1.6,4.3-1.9"></path>
+        <path fill="none" stroke="#000000" d="M91.6,37.5c1.3-0.5,2.8-0.8,4.2-0.7"></path>
+        <path fill="none" stroke="#000000" d="M91.7,38.8c0.2-0.1,0.4-0.1,0.7-0.1c1.2-0.1,2.5,0,3.8,0.3"></path>
+        <path fill="none" stroke="#000000" d="M85,38.4c-1.6-0.1-3.1,0.6-4.6,1.2"></path>
+        <path fill="none" stroke="#000000" d="M85,39.5c-1.4,0.3-2.8,0.9-4,1.6"></path>
+        <path fill="none" stroke="#000000" d="M85.5,40.4c-0.2,0-0.4,0.1-0.7,0.2c-1.1,0.5-2.2,1.1-3.2,1.8"></path>
+        <path fill="#ff7bac" d="M92.8,34.2c0.1,0.3-0.3,0.8-0.9,1c-0.6,0.2-1.2,0.1-1.4-0.2c-0.1-0.3,0.3-0.8,0.9-1 C92.1,33.8,92.7,33.9,92.8,34.2z"></path>
+        <path fill="#ff7bac" d="M82.2,38.2c0.1,0.3,0.7,0.3,1.3,0.1c0.6-0.2,1-0.6,0.9-0.9c-0.1-0.3-0.7-0.3-1.3-0.1 C82.5,37.5,82,37.9,82.2,38.2z"></path>
+        <path fill="#000000" d="M90,35.7L89.3,36l-0.3-0.7c-0.3-0.9,0.1-1.9,0.9-2.3l0.7-0.3l0.3,0.7C91.3,34.4,90.9,35.4,90,35.7z"></path>
+        <path fill="#000000" d="M85.3,37.4l0.7-0.2l-0.2-0.6c-0.3-0.8-1.3-1.2-2.1-0.8L82.9,36l0.2,0.6C83.5,37.4,84.4,37.7,85.3,37.4z"></path>
+
+    </g>
+</svg>
diff --git a/src/views/About.vue b/src/views/About.vue
index a965f04..e8cffe5 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,11 +1,12 @@
 <template>
-    <div id="About" class="markdown-content">
+    <div id="About" class="markdown-content" v-if="html">
         <Dynamic :template="html"></Dynamic>
 
-        <Collapse title="<span class='emoji'>🎓</span> Published papers">
+        <Collapse title="<span class='emoji'>🎓</span> Research papers">
             <ZoteroPublication v-for="item in publications" :key="item.key" :item="item"/>
         </Collapse>
     </div>
+    <Loading v-else></Loading>
 </template>
 
 <script lang="ts">
@@ -15,8 +16,9 @@ import emojiRegex from 'emoji-regex';
 import {parseExtensions} from '@/scripts/extended_markdown'
 import ZoteroPublication, {ZoteroAttachment, ZoteroItem} from "@/components/ZoteroPublication.vue";
 import {hosts} from "@/scripts/constants";
+import Loading from "@/components/Loading.vue";
 
-@Options({components: {ZoteroPublication}})
+@Options({components: {Loading, ZoteroPublication}})
 export default class About extends Vue
 {
     html = ""
diff --git a/src/views/Blog.vue b/src/views/Blog.vue
index 9b198b8..50854fc 100644
--- a/src/views/Blog.vue
+++ b/src/views/Blog.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="Blog">
+    <div id="Blog" v-if="meta">
         <div id="breadcrumb">
             <span class="clickable" @click="() => $router.push({query: {}})">Blog</span>
             <span v-if="tag">🏷️{{tag}}</span>
@@ -8,6 +8,7 @@
         </div>
         <BlogPostPreview v-for="m of filteredPosts" :key="m" :meta="m" :active="m === activePost"/>
     </div>
+    <Loading v-else></Loading>
 </template>
 
 <script lang="ts">
@@ -15,6 +16,7 @@ import {Options, Vue} from 'vue-class-component';
 import BlogPostPreview, {BlogPost} from "@/components/BlogPost.vue";
 import {hosts} from "@/scripts/constants";
 import {Prop} from "vue-property-decorator";
+import Loading from "@/components/Loading.vue";
 
 export interface BlogMeta
 {
@@ -27,7 +29,7 @@ export interface BlogMeta
 
 export let staticMeta: BlogMeta = {tags: [], categories: [], posts: []}
 
-@Options({components: {BlogPostPreview}})
+@Options({components: {Loading, BlogPostPreview}})
 export default class Blog extends Vue
 {
     @Prop() post?: string