From 33e76f9dfcd7198f5e1e3bffab2d2ee062f1c38f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sat, 29 Mar 2025 13:55:05 +0900
Subject: Revert "🎨"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 3451c9a0dedb95d7b22cece61202a9cb027c374d.
---
 packages/frontend/src/components/MkPagination.vue | 67 ++++++++++++++---------
 1 file changed, 42 insertions(+), 25 deletions(-)

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/components/MkPagination.vue b/packages/frontend/src/components/MkPagination.vue
index d23346971f..d90db1748c 100644
--- a/packages/frontend/src/components/MkPagination.vue
+++ b/packages/frontend/src/components/MkPagination.vue
@@ -4,34 +4,42 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<MkLoading v-if="fetching"/>
-
-<MkError v-else-if="error" @retry="init()"/>
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_fade_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_fade_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_fade_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_fade_leaveTo : ''"
+	mode="out-in"
+>
+	<MkLoading v-if="fetching"/>
+
+	<MkError v-else-if="error" @retry="init()"/>
+
+	<div v-else-if="empty" key="_empty_" class="empty">
+		<slot name="empty">
+			<div class="_fullinfo">
+				<img :src="infoImageUrl" draggable="false"/>
+				<div>{{ i18n.ts.nothing }}</div>
+			</div>
+		</slot>
+	</div>
 
-<div v-else-if="empty" key="_empty_" class="empty">
-	<slot name="empty">
-		<div class="_fullinfo">
-			<img :src="infoImageUrl" draggable="false"/>
-			<div>{{ i18n.ts.nothing }}</div>
+	<div v-else ref="rootEl" class="_gaps">
+		<div v-show="pagination.reversed && more" key="_more_">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead">
+				{{ i18n.ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
+		</div>
+		<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
+		<div v-show="!pagination.reversed && more" key="_more_">
+			<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">
+				{{ i18n.ts.loadMore }}
+			</MkButton>
+			<MkLoading v-else class="loading"/>
 		</div>
-	</slot>
-</div>
-
-<div v-else ref="rootEl" class="_gaps">
-	<div v-show="pagination.reversed && more" key="_more_">
-		<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMoreAhead : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMoreAhead">
-			{{ i18n.ts.loadMore }}
-		</MkButton>
-		<MkLoading v-else class="loading"/>
-	</div>
-	<slot :items="Array.from(items.values())" :fetching="fetching || moreFetching"></slot>
-	<div v-show="!pagination.reversed && more" key="_more_">
-		<MkButton v-if="!moreFetching" v-appear="(enableInfiniteScroll && !props.disableAutoLoad) ? appearFetchMore : null" :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">
-			{{ i18n.ts.loadMore }}
-		</MkButton>
-		<MkLoading v-else class="loading"/>
 	</div>
-</div>
+</Transition>
 </template>
 
 <script lang="ts">
@@ -483,6 +491,15 @@ defineExpose({
 </script>
 
 <style lang="scss" module>
+.transition_fade_enterActive,
+.transition_fade_leaveActive {
+	transition: opacity 0.125s ease;
+}
+.transition_fade_enterFrom,
+.transition_fade_leaveTo {
+	opacity: 0;
+}
+
 .more {
 	margin-left: auto;
 	margin-right: auto;
-- 
cgit v1.2.3-freya