diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-04-16 23:04:25 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-04-16 23:04:25 +0900 |
| commit | 0f054aed88934cad8ae4e8b074f8fe97970c5e38 (patch) | |
| tree | 95515ab2ed8574a8ee6e7db90f87ab75eb1d76a9 /src/client/components/form | |
| parent | Merge branch 'develop' of https://github.com/misskey-dev/misskey into develop (diff) | |
| download | sharkey-0f054aed88934cad8ae4e8b074f8fe97970c5e38.tar.gz sharkey-0f054aed88934cad8ae4e8b074f8fe97970c5e38.tar.bz2 sharkey-0f054aed88934cad8ae4e8b074f8fe97970c5e38.zip | |
Tweak UI
Diffstat (limited to 'src/client/components/form')
| -rw-r--r-- | src/client/components/form/suspense.vue | 32 |
1 files changed, 22 insertions, 10 deletions
diff --git a/src/client/components/form/suspense.vue b/src/client/components/form/suspense.vue index 4b47cb959b..e22b09ada4 100644 --- a/src/client/components/form/suspense.vue +++ b/src/client/components/form/suspense.vue @@ -1,16 +1,20 @@ <template> -<div class="_formItem" v-if="pending"> - <div class="_formPanel"> - pending +<transition name="fade" mode="out-in"> + <div class="_formItem" v-if="pending"> + <div class="_formPanel"> + <MkLoading/> + </div> </div> -</div> -<slot v-else-if="resolved" :result="result"></slot> -<div class="_formItem" v-else> - <div class="_formPanel"> - error! - <button @click="retry">retry</button> + <div v-else-if="resolved"> + <slot :result="result"></slot> </div> -</div> + <div class="_formItem" v-else> + <div class="_formPanel"> + error! + <button @click="retry">retry</button> + </div> + </div> +</transition> </template> <script lang="ts"> @@ -72,5 +76,13 @@ export default defineComponent({ </script> <style lang="scss" scoped> +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.125s ease; +} +.fade-enter-from, +.fade-leave-to { + opacity: 0; +} </style> |