From 0f054aed88934cad8ae4e8b074f8fe97970c5e38 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 16 Apr 2021 23:04:25 +0900
Subject: Tweak UI

---
 src/client/components/form/suspense.vue | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

(limited to 'src/client/components/form')

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>
-- 
cgit v1.2.3-freya