From de2f11f8fe721d5a691f6a3cc1512eb9db8ab289 Mon Sep 17 00:00:00 2001
From: Lucien Cartier-Tilet <lucien@phundrak.com>
Date: Mon, 8 May 2023 03:34:48 +0200
Subject: [PATCH] feat: add loader spinner to API loader

---
 content/.vuepress/client.ts                |  2 +
 content/.vuepress/components/ApiLoader.vue |  5 ++-
 content/.vuepress/components/Loader.vue    | 47 ++++++++++++++++++++++
 3 files changed, 53 insertions(+), 1 deletion(-)
 create mode 100644 content/.vuepress/components/Loader.vue

diff --git a/content/.vuepress/client.ts b/content/.vuepress/client.ts
index 75274c4..be18de7 100644
--- a/content/.vuepress/client.ts
+++ b/content/.vuepress/client.ts
@@ -3,6 +3,7 @@ import ResponsiveImage from './components/ResponsiveImage.vue';
 import ListRepositories from './components/GitRepos/ListRepositories.vue';
 import GithubRepository from './components/GitRepos/GithubRepository.vue';
 import ApiLoader from './components/ApiLoader.vue';
+import Loader from './components/Loader.vue';
 import Cache from './components/Cache.vue';
 
 export default defineClientConfig({
@@ -11,6 +12,7 @@ export default defineClientConfig({
     app.component('ListRepositories', ListRepositories);
     app.component('GithubRepository', GithubRepository);
     app.component('ApiLoader', ApiLoader);
+    app.component('Loader', Loader);
     app.component('Cache', Cache);
   },
   setup() {},
diff --git a/content/.vuepress/components/ApiLoader.vue b/content/.vuepress/components/ApiLoader.vue
index a4f2777..3d38ef5 100644
--- a/content/.vuepress/components/ApiLoader.vue
+++ b/content/.vuepress/components/ApiLoader.vue
@@ -1,6 +1,8 @@
 <template>
   <Cache name="repos" :callback="fetchData" @cached="processCachedData" />
-  <slot v-if="loading" name="loader"></slot>
+  <slot v-if="loading" name="loader">
+    <Loader />
+  </slot>
   <slot v-else-if="error" name="error"></slot>
   <slot v-else>
     {{ error }}
@@ -9,6 +11,7 @@
 
 <script setup lang="ts">
 import Cache from './Cache.vue';
+import Loader from './Loader.vue';
 
 import { Ref, ref } from 'vue';
 import { Observable, catchError, switchMap, throwError } from 'rxjs';
diff --git a/content/.vuepress/components/Loader.vue b/content/.vuepress/components/Loader.vue
new file mode 100644
index 0000000..c4f69ee
--- /dev/null
+++ b/content/.vuepress/components/Loader.vue
@@ -0,0 +1,47 @@
+<template>
+  <svg
+    class="circle-loader"
+    width="40"
+    height="40"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle cx="20" cy="20" r="15" />
+  </svg>
+</template>
+
+<style lang="less" scoped>
+@import 'node_modules/nord/src/lesscss/nord.less';
+
+.circle-loader {
+  margin-left: 48%;
+  fill: transparent;
+  stroke: @nord7;
+  stroke-width: 5;
+  animation: dash 1.5s ease infinite, rotate 2s linear infinite;
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 95;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 85, 95;
+    stroke-dashoffset: -25;
+  }
+  100% {
+    stroke-dasharray: 85, 95;
+    stroke-dashoffset: -90;
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>