phundrak/phundrak.com
1
0
Fork 0
Code Issues Pull Requests Actions Activity

feat: add loader spinner to API loader

Browse Source
This commit is contained in:
Lucien Cartier-Tilet 2023-05-08 03:34:48 +02:00
parent 8cbd1dbf07
commit de2f11f8fe
Signed by: phundrak
GPG Key ID: BD7789E705CB8DCA
3 changed files with 53 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/.vuepress/client.ts
View File

@ -3,6 +3,7 @@ import ResponsiveImage from './components/ResponsiveImage.vue';
import ListRepositories from './components/GitRepos/ListRepositories.vue'; import ListRepositories from './components/GitRepos/ListRepositories.vue';
import GithubRepository from './components/GitRepos/GithubRepository.vue'; import GithubRepository from './components/GitRepos/GithubRepository.vue';
import ApiLoader from './components/ApiLoader.vue'; import ApiLoader from './components/ApiLoader.vue';
import Loader from './components/Loader.vue';
import Cache from './components/Cache.vue'; import Cache from './components/Cache.vue';
export default defineClientConfig({ export default defineClientConfig({
@ -11,6 +12,7 @@ export default defineClientConfig({
app.component('ListRepositories', ListRepositories); app.component('ListRepositories', ListRepositories);
app.component('GithubRepository', GithubRepository); app.component('GithubRepository', GithubRepository);
app.component('ApiLoader', ApiLoader); app.component('ApiLoader', ApiLoader);
app.component('Loader', Loader);
app.component('Cache', Cache); app.component('Cache', Cache);
}, },
setup() {}, setup() {},

5
content/.vuepress/components/ApiLoader.vue
View File

@ -1,6 +1,8 @@
<template> <template>
<Cache name="repos" :callback="fetchData" @cached="processCachedData" /> <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-if="error" name="error"></slot>
<slot v-else> <slot v-else>
{{ error }} {{ error }}
@ -9,6 +11,7 @@
<script setup lang="ts"> <script setup lang="ts">
import Cache from './Cache.vue'; import Cache from './Cache.vue';
import Loader from './Loader.vue';
import { Ref, ref } from 'vue'; import { Ref, ref } from 'vue';
import { Observable, catchError, switchMap, throwError } from 'rxjs'; import { Observable, catchError, switchMap, throwError } from 'rxjs';

47
content/.vuepress/components/Loader.vue Normal file
View File

@ -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>