Tweak UI

2 files changed, 53 insertions, 34 deletions

diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 77f15b8a49..b203a1322a 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -1,37 +1,37 @@
 <template>
 <div class="fcuexfpr _root">
-	<div v-if="note" class="note" v-anim>
-		<div class="_gap" v-if="showNext">
-			<XNotes class="_content" :pagination="next" :no-gap="true"/>
-		</div>
-
-		<div class="main _gap">
-			<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
-			<div class="_content _gap">
-				<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
-				<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+	<transition name="fade" mode="out-in">
+		<div v-if="note" class="note">
+			<div class="_gap" v-if="showNext">
+				<XNotes class="_content" :pagination="next" :no-gap="true"/>
 			</div>
-			<div class="_content clips _gap" v-if="clips && clips.length > 0">
-				<div class="title">{{ $ts.clip }}</div>
-				<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
-					<b>{{ item.name }}</b>
-					<div v-if="item.description" class="description">{{ item.description }}</div>
-					<div class="user">
-						<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
-					</div>
-				</MkA>
+
+			<div class="main _gap">
+				<MkButton v-if="!showNext && hasNext" class="load next" @click="showNext = true"><Fa :icon="faChevronUp"/></MkButton>
+				<div class="_content _gap">
+					<MkRemoteCaution v-if="note.user.host != null" :href="note.url || note.uri" class="_gap"/>
+					<XNoteDetailed v-model:note="note" :key="note.id" class="_gap"/>
+				</div>
+				<div class="_content clips _gap" v-if="clips && clips.length > 0">
+					<div class="title">{{ $ts.clip }}</div>
+					<MkA v-for="item in clips" :key="item.id" :to="`/clips/${item.id}`" class="item _panel _gap">
+						<b>{{ item.name }}</b>
+						<div v-if="item.description" class="description">{{ item.description }}</div>
+						<div class="user">
+							<MkAvatar :user="item.user" class="avatar"/> <MkUserName :user="item.user" :nowrap="false"/>
+						</div>
+					</MkA>
+				</div>
+				<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
 			</div>
-			<MkButton v-if="!showPrev && hasPrev" class="load prev" @click="showPrev = true"><Fa :icon="faChevronDown"/></MkButton>
-		</div>
 
-		<div class="_gap" v-if="showPrev">
-			<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+			<div class="_gap" v-if="showPrev">
+				<XNotes class="_content" :pagination="prev" :no-gap="true"/>
+			</div>
 		</div>
-	</div>
-
-	<div v-if="error">
-		<MkError @retry="fetch()"/>
-	</div>
+		<MkError v-else-if="error" @retry="fetch()"/>
+		<MkLoading v-else/>
+	</transition>
 </div>
 </template>
 
@@ -106,6 +106,7 @@ export default defineComponent({
 	},
 	methods: {
 		fetch() {
+			this.note = null;
 			os.api('notes/show', {
 				noteId: this.noteId
 			}).then(note => {
@@ -138,6 +139,15 @@ 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;
+}
+
 .fcuexfpr {
 	> .note {
 		> .main {
diff --git a/src/client/pages/user/index.vue b/src/client/pages/user/index.vue
index 2322b09ea9..630ac382b5 100644
--- a/src/client/pages/user/index.vue
+++ b/src/client/pages/user/index.vue
@@ -1,6 +1,6 @@
 <template>
-<div>
-	<div class="ftskorzw wide _section" v-if="user && narrow === false">
+<transition name="fade" mode="out-in">
+	<div class="ftskorzw wide" v-if="user && narrow === false">
 		<MkRemoteCaution v-if="user.host != null" :href="user.url" class="_gap"/>
 
 		<div class="banner-container _gap" :style="style">
@@ -212,10 +212,9 @@
 			<XPages v-else-if="page === 'pages'" :user="user" class="_gap"/>
 		</div>
 	</div>
-	<div v-else-if="error">
-		<MkError @retry="fetch()"/>
-	</div>
-</div>
+	<MkError v-else-if="error" @retry="fetch()"/>
+	<MkLoading v-else/>
+</transition>
 </template>
 
 <script lang="ts">
@@ -324,6 +323,7 @@ export default defineComponent({
 
 		fetch() {
 			if (this.acct == null) return;
+			this.user = null;
 			Progress.start();
 			os.api('users/show', parseAcct(this.acct)).then(user => {
 				this.user = user;
@@ -369,6 +369,15 @@ 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;
+}
+
 .ftskorzw.wide {
 	max-width: 1150px;
 	margin: 0 auto;