STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 3 Actions Packages Projects Releases 3 Wiki Activity

added loading support

Browse Source
This commit is contained in:
James Collins
2023-04-19 14:49:15 +10:00
parent 2ad5b04a48
commit 4b1bc23622
1 changed files with 15 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/components/SMPage.vue
View File

@@ -1,5 +1,10 @@
<template> <template>
<template v-if="pageError < 300"> <template v-if="loading">
<div class="page-loading">
<SMLoadingIcon large />
</div>
</template>
<template v-else-if="pageError < 300">
<slot></slot> <slot></slot>
</template> </template>
<template v-else> <template v-else>
@@ -22,11 +27,12 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, watch, ref } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { useApplicationStore } from "../store/ApplicationStore"; import { useApplicationStore } from "../store/ApplicationStore";
import { useUserStore } from "../store/UserStore"; import { useUserStore } from "../store/UserStore";
import SMButton from "../components/SMButton.vue"; import SMButton from "../components/SMButton.vue";
import { computed, watch, ref } from "vue"; import SMLoadingIcon from "./SMLoadingIcon.vue";
const router = useRouter(); const router = useRouter();
const applicationStore = useApplicationStore(); const applicationStore = useApplicationStore();
@@ -94,6 +100,13 @@ if (
</script> </script>
<style lang="scss"> <style lang="scss">
.page-loading {
display: flex;
flex-grow: 1;
justify-content: center;
align-items: center;
}
.page-error { .page-error {
display: flex; display: flex;
flex-direction: column; flex-direction: column;