feat: add loader spinner to API loader

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() {},

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';

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>