diff --git a/src/client/components/chart.vue b/src/client/components/chart.vue index 8eb9f93f33e9a4d4b60eafe24fcd1b15f3dd32ba..2b94bd679d1f42bebcba727775a29a9d65577c60 100644 --- a/src/client/components/chart.vue +++ b/src/client/components/chart.vue @@ -1,5 +1,10 @@ <template> -<canvas ref="chartEl"></canvas> +<div class="cbbedffa"> + <canvas ref="chartEl"></canvas> + <div v-if="fetching" class="fetching"> + <MkLoading/> + </div> +</div> </template> <script lang="ts"> @@ -622,7 +627,28 @@ export default defineComponent({ return { chartEl, + fetching, }; }, }); </script> + +<style lang="scss" scoped> +.cbbedffa { + position: relative; + + > .fetching { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + -webkit-backdrop-filter: var(--blur, blur(12px)); + backdrop-filter: var(--blur, blur(12px)); + display: flex; + justify-content: center; + align-items: center; + cursor: wait; + } +} +</style>