diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-27 11:44:04 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2023-05-27 11:44:04 +0900 |
| commit | 3a924f3dc62048e5edea9288de195f0b60760cee (patch) | |
| tree | 6f0c175b23eba2d186f9bc5415428c8ac4e3b531 /packages/frontend/src/components/form | |
| parent | refactor (diff) | |
| download | misskey-3a924f3dc62048e5edea9288de195f0b60760cee.tar.gz misskey-3a924f3dc62048e5edea9288de195f0b60760cee.tar.bz2 misskey-3a924f3dc62048e5edea9288de195f0b60760cee.zip | |
refactor
Diffstat (limited to 'packages/frontend/src/components/form')
| -rw-r--r-- | packages/frontend/src/components/form/suspense.vue | 41 |
1 files changed, 13 insertions, 28 deletions
diff --git a/packages/frontend/src/components/form/suspense.vue b/packages/frontend/src/components/form/suspense.vue index 9b39858ca1..b3d8c22b27 100644 --- a/packages/frontend/src/components/form/suspense.vue +++ b/packages/frontend/src/components/form/suspense.vue @@ -1,18 +1,16 @@ <template> -<Transition :name="defaultStore.state.animation ? 'fade' : ''" mode="out-in"> - <div v-if="pending"> - <MkLoading/> +<div v-if="pending"> + <MkLoading/> +</div> +<div v-else-if="resolved"> + <slot :result="result"></slot> +</div> +<div v-else> + <div :class="$style.error"> + <div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div> + <MkButton inline style="margin-top: 16px;" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton> </div> - <div v-else-if="resolved"> - <slot :result="result"></slot> - </div> - <div v-else> - <div class="wszdbhzo"> - <div><i class="ti ti-alert-triangle"></i> {{ i18n.ts.somethingHappened }}</div> - <MkButton inline class="retry" @click="retry"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton> - </div> - </div> -</Transition> +</div> </template> <script lang="ts" setup> @@ -60,22 +58,9 @@ const 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; -} - -.wszdbhzo { +<style lang="scss" module> +.error { padding: 16px; text-align: center; - - > .retry { - margin-top: 16px; - } } </style> |