summaryrefslogtreecommitdiff
path: root/src/client/components/debobigego/suspense.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/debobigego/suspense.vue')
-rw-r--r--src/client/components/debobigego/suspense.vue101
1 files changed, 0 insertions, 101 deletions
diff --git a/src/client/components/debobigego/suspense.vue b/src/client/components/debobigego/suspense.vue
deleted file mode 100644
index e59e0ba12d..0000000000
--- a/src/client/components/debobigego/suspense.vue
+++ /dev/null
@@ -1,101 +0,0 @@
-<template>
-<transition name="fade" mode="out-in">
- <div class="_debobigegoItem" v-if="pending">
- <div class="_debobigegoPanel">
- <MkLoading/>
- </div>
- </div>
- <div v-else-if="resolved" class="_debobigegoItem">
- <slot :result="result"></slot>
- </div>
- <div class="_debobigegoItem" v-else>
- <div class="_debobigegoPanel eiurkvay">
- <div><i class="fas fa-exclamation-triangle"></i> {{ $ts.somethingHappened }}</div>
- <MkButton inline @click="retry" class="retry"><i class="fas fa-redo-alt"></i> {{ $ts.retry }}</MkButton>
- </div>
- </div>
-</transition>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType, ref, watch } from 'vue';
-import './debobigego.scss';
-import MkButton from '@client/components/ui/button.vue';
-
-export default defineComponent({
- components: {
- MkButton
- },
-
- props: {
- p: {
- type: Function as PropType<() => Promise<any>>,
- required: true,
- }
- },
-
- setup(props, context) {
- const pending = ref(true);
- const resolved = ref(false);
- const rejected = ref(false);
- const result = ref(null);
-
- const process = () => {
- if (props.p == null) {
- return;
- }
- const promise = props.p();
- pending.value = true;
- resolved.value = false;
- rejected.value = false;
- promise.then((_result) => {
- pending.value = false;
- resolved.value = true;
- result.value = _result;
- });
- promise.catch(() => {
- pending.value = false;
- rejected.value = true;
- });
- };
-
- watch(() => props.p, () => {
- process();
- }, {
- immediate: true
- });
-
- const retry = () => {
- process();
- };
-
- return {
- pending,
- resolved,
- rejected,
- result,
- retry,
- };
- }
-});
-</script>
-
-<style lang="scss" scoped>
-.fade-enter-active,
-.fade-leave-active {
- transition: opacity 0.125s ease;
-}
-.fade-enter-from,
-.fade-leave-to {
- opacity: 0;
-}
-
-.eiurkvay {
- padding: 16px;
- text-align: center;
-
- > .retry {
- margin-top: 16px;
- }
-}
-</style>