diff options
Diffstat (limited to 'src/client/components')
| -rw-r--r-- | src/client/components/form/suspense.vue | 20 |
1 files changed, 17 insertions, 3 deletions
diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue index 2a48faccb3..d04dc07624 100644 --- a/src/client/components/form/suspense.vue +++ b/src/client/components/form/suspense.vue @@ -9,9 +9,9 @@ <slot :result="result"></slot> </div> <div class="_formItem" v-else> - <div class="_formPanel"> - error! - <button @click="retry">retry</button> + <div class="_formPanel 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> @@ -20,8 +20,13 @@ <script lang="ts"> import { defineComponent, PropType, ref, watch } from 'vue'; import './form.scss'; +import MkButton from '@client/components/ui/button.vue'; export default defineComponent({ + components: { + MkButton + }, + props: { p: { type: Function as PropType<() => Promise<any>>, @@ -84,4 +89,13 @@ export default defineComponent({ .fade-leave-to { opacity: 0; } + +.eiurkvay { + padding: 16px; + text-align: center; + + > .retry { + margin-top: 16px; + } +} </style> |